seohyun han

※ React 를 사용해 만든 메모장 SPA 어플리케이션 인프런의 프로젝트로 배우는 React.js 강의를 듣고 응용하여 만든 프로젝트입니다. ⬇️ ✅ 목표 - React, Hook, SPA, ES6 이해 및 학습 ⚒️ Dependency - axios - json-server - prop-types - react-router-dom 🔫 요구사항 - 메모 등록, 조회, 수정, 삭제 - 조회 시 로딩 중 Spinner 보여주기 - NavBar 페이지 나누기 ▶ 라우팅 App.js , , , 이런 방법도 있지만 아래와 같이 작성하면 컴포넌트가 많아질 때 코드의 재사용성을 높일 수 있다. routes.js const routes =[ { path:'/', component: HomePage }, { path:..

▶ React 프로젝트 생성 PowerShell 관리자 권한으로 실행 cd C:/Users/user/desktop/proj npx create-react-app {프로젝트 이름} 이런 화면 뜨면 준비 OK cd {프로젝트 이름} npm start Error [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\user\desktop\proj\react-basic-proj\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\user\Desktop\proj\react-basic-proj\node_modules\..

※ map() - 자바스크립트 배열의 map() 함수 - 파라미터로 전달된 함수를 사용해서 배열 내의 각 요소를 원하는 규칙에 따라 변환 후 결과로 새로운 배열을 생성한다 ▶ 문법 arr.map(callback, [thisArg]) ▷ 파라미터 callback 1. currentValue : 현재 처리하고 있는 요소 2. 현재 처리하고 있는 요소의 index 값 3. 현재 처리하고 있는 원본 배열 ▷ thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼스 예제 ) map 함수를 사용하여 배열 [1,2,3,4,5]의 각 요소를 제곱해서 새 로운 배열을 생성하자 Javascript ES6 const nums = [1,2,3,4,5,6]; const result = nums.map(..

※ useEffect - 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook - useEffect는 기본적으로 렌더링되고 난 직후마다 실행 되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐 ▶ useEffect의 기본형태 useEffect(function, deps - function : 실행하고자 하는 함수 - deps : 배열 형태. function을 실행시킬 조건. = > deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행합니다 참조 : https://cocoon1787.tistory.com/796 ▶ useEffect 사용예시 import React, { useState, useE..

[유튜브 개발화라리] 강의 contextAPI 로 리액트 상태 관리 레벨업 하기! - YouTube React Context 란 ? React 의 앱은 component tree 로 구성되어있다 React 의 데이터는 부모컴포넌트 => 자식컴포넌트 로 props 를 통해 전달된다 엄청 거대한 react 프로젝트가 있다고 가정하면, 모든 데이터를 일일히 props 를 이용해 전달하는건 매우 불편하다 = > 따라서 React 에서는 Context API 를 제공 Context : app 안에서 전역적으로 사용되는 데이터를 컴포넌트 사이에서 전달이 쉽게 한다 app (최상위 컴포넌트) - about - profile 이런 트리가 있다고 가정해보자 [1] 상위 컴포넌트에서 context 에 값 넣기 1. con..

current 라는 객체에 저장됨 useRef 는 current 라는 속성을 가진 객체를 반환한다. current 에 들어가는 값은 useRef 의 인자로 넘겨준 값이다. > 리렌더링이 되어도 계속 유지하기 위해서 컴포넌트의 DOM 요소에 접근하기 위해서 리액트에서는 document.queyrSelect ~ 이런식으로 dom 요소를 가져오는 것은 권장하지 않는다. html 속성에는 ref 라는 값이 다 있음 리렌더링이 되는 조건 1. 부모에서 내려온 props 가 바뀌었을 때 2. 컴포넌트 내부의 state 가 변경이 생겼을 때 리렌더링이 되면 함수가 처음부터 다시 실행된다. useRef 사용하면 손쉽게 dom 요소에 접근이 가능함. useRef(value) 를 호출하면 ref Object 를 반환해준다..

유튜브 코딩애플 React 강의 필기 useState('') 를 사용하면 항상 두개의 변수가 들어갈 수 있는 array 가 남게된다. [state데이터, state 데이터 변경함수] let [글제목,글제목변경]= useState('남자 코트 추천'); 따라서 이렇게 두개로 형식을 맞춰줘야 함 useState() 괄호 안에는 배열, Object 등 모두 넣을 수 있다. 이는 모두 배열 형식으로 저장됨 그럼 왜 ! 변수가 아니라 state 를 쓸까 ? => state 가 변경이 될 때 , 데이터를 담고있는 html 은 자동으로 재렌더링이된다 (re-rendering) 일반변수는 새로고침이 됨 function App(){ let [글제목,글제목변경]= useState(['남자 코트 추천','강남우동맛집']);..

▶ import / export 변수나 함수를 다른 파일에 저장해두고 불러와서 사용할 수 있다 ▷ data.js 에서 App.js로 변수나 데이터를 보내려면 1. data.js에서 원하는 데이터를 export 하고 (export default + 변수,함수,데이터) export default 문법 (data.js 파일) var mydata = 'hong'; export default mydata; 2. App.js에서는 data.js를 import 하면 됨 import mydata from './data.js'; 1. data.js export default [ { no : 1, title : "리액트 책 추천", name: "홍길동", content : "리액트를 다루는 기술" }, { no : 2, ..

리액트는 컴포넌트를 import 해서 사용한다 ▶ 함수형 컴포넌트 예제 1 ) 컴포넌트 (=function 이라고 생각하면됨) 기본틀잡기 ( 단축키 : rsc enter ) app 컴포넌트에서 potato 컴포넌트 갖다쓰기 - potato import 하기 app 에서 리턴해주는 애는 html.index div root 안으로 들어간다 potato 에서 리턴한 애는 app 으로 들어간다 app + poatao 가 html.index div root 안으로 들어간다 예제 2 ) ▶ 클래스형 컴포넌트 도 있긴한데 넘어가도록하자 화살표 함수에서 this 는 자신이 속한 클래스를 의미한다 기존함수에서 this 는 자신이 속해있는 곳에서 가장 가까운 객체를 의미한다 ▶ props = property react 에..

※ React 리액트 - 구조가 MVC, MVW 등인 프레임워크와 달리 오직 View만 신경쓰는 라이브러리 - 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 함 ( 재사용 가능한 API ) ▶ 렌더링 - 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는과정 - 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 함 - 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함 - 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야 함 render 함수 - 컴포넌트가 어떻게 생겼는지 정의하는 역할 - 최상위 컴포넌트 ( app..