[패스트캠퍼스:6주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4
01
컴포넌트 상태 다루기
컴포넌트 : 엘리먼트(요소)의 집합
useState
컴포넌트의 상태 관리
React.useState(기본값)을 console창에 출력해 보면 배열 데이터를 반환한다.
keyword는 값, setKeyword는 값 할당에 사용된다.
useState를 사용하면 새로 랜더하지 않아도, 값이 바뀌면 바로 랜더된다.
(지난번 코드는 render함수로 <App />을 매번 랜더해줬다.)
02
컴포넌트 사이드 이펙트 다루기
useEffect
컴포넌트의 사이드 이펙트 관리 (부수 효과)
부수 효과를 내기 위한 훅
어떤 조건을 설정해서 그 조건이 변할 때 동작한다.
조건은 dependency array라고 한다.
공란 : 아무것도 넣지 않으면 모든 변화에 동작 실행
[] : 빈 배열은 처음에 컴포넌트가 실행될 때만 실행
변수 : 해당 변수가 바뀔 때마다 실행
03
커스텀훅 만들기
use{Name}
훅을 위한 함수를 만든다.
함수에 반복되는 훅을 넣어서 한 번의 함수 호출로 여러 개의 훅을 동작시킨다.
04
훅 플로우 이해하기
훅의 호출과 사라지는 타이밍
App 랜더 > App 랜더 끝 > App 내부 useEffect
setState((변수) => !변수)
'변수'에 setState의 현재 boolean 값이 들어가고 => 이후에
반대 값으로 바뀌어서 setState가 다시 할당된다.
(예) true == ! true와 동일
05
좀 더 복잡한 훅 플로우
const 부모 = () => {
자식 - useState, useEffect
useState
useEffect
}
이런 경우
부모 랜더 > 부모 useState > 부모 랜더 끝 > 자식 랜더 > 자식 useState > 자식 useEffect > 자식 랜더 끝 > 부모 useEffect
순서로 플로우가 일어난다.
cleanup
이전 세팅된 훅을 지운다.
useEffect cleanup이 먼저 일어나고 useEffect가 실행된다.
