React 기본 - 간단한 일기장 프로젝트

 

✔️ React에서 사용자 입력 처리하기

• const [state, setState] = useState()의 파라미터로 객체를 전달하여 함수 재사용
• useState("초기값") 지정, input 태그에서 그 값을 활용할 때 onChange 이벤트 내 setState 함수를 호출해야 키보드 입력 시 state 변화
• 객체의 기본 값을 활용할 때 스프레드 연산자(...객체명) 이용, 스프레드 연산자는 변경하고자 하는 프로퍼티 앞에 사용
• setState({ ...state, [e.target.name]: e.target.value });

 

 

✔️ React에서 DOM 조작하기 - useRef

• useRef() 호출 반환 값 = React.MutableRefObject<undefined> : HTML DOM 요소 접근
• <input ref="레퍼런스객체"/> 레퍼런스객체.current : 현재 가리키는 값

 

✔️ React에서 배열 사용하기 1 - 리스트 렌더링(조회)

• map( (it) => { // 반복할 내용 } ) 
• map으로 반복 시 각 반복 시 고유한 id(또는 idx) 지정해야 함 -> 자식 컴포넌트에 id 부여  ex. <div key={it.id}> 
• 컴포넌트명.defaultProps 로 초기값을 지정하면 props로 undefined가 내려와도 에러 방지
• 렌더링된 아이템을 별도의 컴포넌트로 분리할 수 있음

 

✔️ React에서 배열 사용하기 2 - 데이터 추가하기, 데이터 삭제하기

• 리액트에서는 같은 레벨(트리)끼리 데이터 주고받기 불가 -> 단방향 데이터 흐름
• 데이터를 공통 부모요소로 끌어 올리기(State 끌어 올리기) : 자식요소에 data(state) 렌더링 및 setData(setState) Props로 전달
• Event(UP 자식->부모) Data(Down 부모->자식)

 

✔️ React의 Lifecycle 제어하기 - useEffect

• Component Mount(ex. 초기화 작업) -> Update(re-render, ex. 예외 처리 작업) -> Unmount(ex. 메모리 정리 작업)
• Class React Component Only(cf. 함수형 컴포넌트 X) : Mount(ComponentDidMount), Update(ComponentDidUpdate), Unmount(ComponentWillUnmount)
• 본래 State도 클래스 컴포넌트만 사용할 수 있는 기능이지만, 함수형 컴포넌트에서는 'Hooks'(useState, useEffect, useRef)를 통해 클래스형 컴포넌트 기능을 사용
• 굳이 클래스형 컴포넌트 대신 함수형 컴포넌트를 사용하는 이유 : 컴포넌트 코드 길이 문제, 중복 코드 및 가독성 문제 해결
• useEffect를 통해 컴포넌트의 Lifecycle를 관리
• useEffect( () => { // to do.. CALLBACK함수 }, [Dependency Array 의존성 배열] ); // 의존성 배열 내의 값이 변화하면 콜백 함수가 수행됨
• Mount : 의존성 배열에 빈 배열 [] 을 전달하게 되면, 컴포넌트가 마운트 되는 시점에만 콜백 함수 동작
• Update : 컴포넌트가 업데이트 될 때 1) State 변경 2) 부모로부터 내려받는 Props 변화 3) 부모 컴포넌트 리렌더 -> 의존성 배열 없이 콜백 함수만 작성하는 경우 Update될 때 마다 콜백 함수 동작 OR 의존성 배열에 [state] 의 형태로 작성하는 경우 state가 변화할 때 마다 콜백 함수 동작
• UnMount : 콜백 함수 내 return값 부여

 

✔️ React에서 API 호출하기

• async, fetch 함수 이용해서 더미 데이터 넣기

 

✔️ React Devloper Tools

•  https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko 

 

✔️  최적화 1 - useMemo

• Memoization : 이미 계산한 연산 결과를 기억해 두었다가, 동일한 계산 시 다시 연산하지 않고 기억해 두었던 데이터를 반환하는 방법
• object의 경우 비원시(객체) 타입이라 값이 저장될 때 마다 메모리 주소가 달라짐, 이를 해결하기 위해 useMemo 사용
• return을 가지고 있는 함수를 Memoization해서 연산 최적화
• useMemo : Memoization하고 싶은 함수를 콜백 함수 형태로 감싸서 사용 + Dependency array
• useMemo는 함수가 아니라, 콜백 함수 내에서 return하는 값을 리턴  cf. 콜백함수(); - (X)

 

✔️  최적화 2 - React.memo

• 부모 컴포넌트 업데이트 시 자식 컴포넌트가 무조건 렌더링 되지 않고, 조건부로 렌더링하기 위해 사용 -> 성능 최적화
• React.memo : 함수형 컴포넌트에 업데이트 조건 걸기, HOC 
• HOC(Higher Order Component) : 컴포넌트를 가져와(매개변수) 새로운 컴포넌트 반환, 컴포넌트 로직 재사용
• React.memo로 조건부로 렌더링할 컴포넌트를 감싸서 사용
• 다만 부모가 아닌 자신의 state가 업데이트 되는 경우 리렌더링
• 자바스크립트는 비원시 타입의 자료형(ex. 객체, 함수, 배열)을 비교할 때 얕은 비교를 함(객체의 메모리 주소에 의한 비교)

 

✔️  최적화 3 - useCallback

• 메모이제이션된 콜백 반환  cf. useMemo : 값 반환
• Dependency Array [a, b] 중 두 번째 인자인 b가 변하지 않는다면 첫 번째 인자로 전달한 콜백 함수 a를 계속 재사용 할 수 있게 해줌
• 함수가 컴포넌트가 재생성될 때 다시 생성되는 되는 이유 : 현재의 State값을 참조하기 위해 
• 함수형 Update : 상태 변화 set 함수에 값 대신 함수 전달 -> Dependency array로 빈 배열 [] 을 전달해 마운트 시점에만 업데이트 되도록 설정해도, 업데이트 시 기존 data 값을 잃지 않고 최신의 state를 인자를 통해 참조

 

✔️  복잡한 상태의 로직 분리하기 - useReducer

• useReducer : 컴포넌트 밖으로 상태 변화 로직 분리
• const [state, dispatch] = useReducer(reducer, 초기값);
• dispatch : 상태를 변화시키는 action을 발생시키는 함수, 상태 변화 raise
• reducer : 상태 변화를 처리하는 함수
• dispatch(action 객체) -> action 객체  = { type : '처리 구분값', action에 필요한 데이터 }

 

✔️  컴포넌트 트리에 데이터 공급하기 - Context

• context : 문맥, 컴포넌트 트리에 전역적으로 데이터 공급
• props drilling 방지
• Context 생성 : const MyContext = React.createContext(defaultValue);
• Context Provider를 통한 데이터 공급 : <MyContext.Provider value={ 전역으로 전달하고자 하는 값 }> { /*Context 안에 위치할 자식 컴포넌트들*/ } </MyContext.Provider>

 

 

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지