useState
1
const [state, setState] = useState(initialState);
useState는 값, 그리고 업데이트 함수를 반환한다. 최초 렌더링 시, useState의 인자로 전달받은 초기값을 렌더링한다. setState함수는 state 값을 업데이트하며, state가 업데이트되면 state를 출력하는 컴포넌트들이 리렌더링 된다. setState는 비동기적으로 동작하며, useState의 state는 가장 최근의 업데이트 값이 된다.
만약 setState가 현재 값과 동일한 값을 리턴할 경우, 컴포넌트들의 리렌더링은 완전히 스킵된다.
useEffect
1
useEffect(didUpdate);
useEffect는 함수를 인자로 가진다. 이 함수는 화면이 렌더링된 후 실행된다. useEffect는 기본적으로 렌더링이 완료될 때 마다 실행된다. 그러나 특정 값이 변경된 경우에만 실행되도록 선택할 수 있다.
Cleaning up an effect
종종 useEffect는 컴포넌트가 사라질 때 정리할 필요가 있다.(예를들면 subscription 또는 timerID) 이때 필요한 함수를 clean up 함수라 부르며, useEffect가 리턴될 때 clean up 함수를 호출하면 된다.
1
2
3
4
5
6
7
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
});
clean up 함수는 메모리 누수를 방지하기 위해 UI로부터 컴포넌트가 사라지기 전에 실행된다. 추가로 컴포넌트가 여러번 렌더링 될 때, 이전 effect는 다음 effect가 실행되기 전에 정리된다.
useEffect를 조건부로 동작하려면 두 번째 인수를 전달하면 된다. 두 번째 인수는 useEffect의 의존성을 결정한다.
1
2
3
4
5
6
7
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
},[props.source];
위 코드의 경우 props.source가 변경될 때만 useEffect는 실행되게 된다. 두 번째 인자에 빈 배열을 넣을 경우는 의존성이 없으므로 컴포넌트가 최초 렌더링될 때 한 번만 실행된다.
그 외..
기본 Hook에는 useState, useEffect 외 useContext가 있다. useContext는 React Context로 따로 포스팅할 예정이다.