useState란?
useState는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 함수이다.
useState는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소는 상태값, 두번째 원소는 상태값을 변경할 때 사용되는 setter 함수가 반환된다. useState는 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 된다.
const [state, setState] = useState(initialState);상태값 변경시 리렌더링 발생
useState에서 반환된 배열의 두번째 값인 setter 함수를 호출하면 상태 값 변경과 함께 렌더링도 다시 진행된다.
상태값 변경은 비동기적으로 동작
useState의 setter 함수를 호출한 이후 바로 다음 줄에서 해당 state 값을 참조하면 아직 바뀌기 이전 state 가 참조된다. useState의 setter 함수가 비동기적으로 동작하기 때문이다.
짧은 시간안에 setter 함수를 연속적으로 호출 시 렌더링은 1번만 진행
useEffect란?
컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 React Hook이다.
클래스형 컴포넌트에서 사용하던 라이프사이클 훅을 함수형 컴포넌트에서 useEffect로 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount)
useEffect 는 여러 개 작성할 수 있다
하나의 컴포넌트에서는 useEffect를 여러개 작성하는 것이 가능하다.
useEffect 의 로직 함수에서 반환하는 함수는 컴포넌트가 파괴(unmount) 될 때 호출되는 클린업 함수이다
useEffect(() => {
const listner = (event: UIEvent) => {
console.log(`[${performance.now()}] window size 변경됨!`);
};
window.addEventListener('resize', listner);
return () => {
window.removeEventListener('resize', listner);
};
}, []);clean-up 코드는 useEffect Hook 내에서 return되는 함수를 말한다. 컴포넌트가 사라질 때(unmount 시점), 특정 값이 변경되기 직전(deps update 직전)에 실행할 작업을 지정할 수 있다.
useEffect 끼리는 순서대로 호출된다
useEffect 가 여러개 작성되어 있는 경우에는 제일 먼저 작성 되어 있는 useEffect 부터 제일 마지막에 작성되어 있는 useEffect 순으로 순서대로 호출된다.
