[패스트캠퍼스:6주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4

01

컴포넌트 상태 다루기

컴포넌트 : 엘리먼트(요소)의 집합

 

 

useState

컴포넌트의 상태 관리

해당 코드는 아래 코드와 동일하다.

React.useState(기본값)을 console창에 출력해 보면 배열 데이터를 반환한다.

keyword는 값, setKeyword는 값 할당에 사용된다.

 

useState를 사용하면 새로 랜더하지 않아도, 값이 바뀌면 바로 랜더된다.

(지난번 코드는 render함수로 <App />을 매번 랜더해줬다.)

 

 

---

 

02

컴포넌트 사이드 이펙트 다루기

 

useEffect

컴포넌트의 사이드 이펙트 관리 (부수 효과)

부수 효과를 내기 위한 훅

 

어떤 조건을 설정해서 그 조건이 변할 때 동작한다.

조건은 dependency array라고 한다.

 

표시한 부분이 depency array

keyword의 useState가 변하면 해당 useEffect 코드가 동작한다.

공란 : 아무것도 넣지 않으면 모든 변화에 동작 실행

[] : 빈 배열은 처음에 컴포넌트가 실행될 때만 실행

변수 : 해당 변수가 바뀔 때마다 실행

 

 

---

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가 실행된다.