[React] Hook 정리 (useEffect)

🟠 useEffect

component의 side effect를 관리하기 위해 사용하는 hook

side effect 란
컴포넌트는 화면에 처음 그려지고, 수정됐을 때 리랜더링되고, 화면에서 사라지는 LifeCycle을 갖고있다.
예를 들어 화면에 컴포넌트가 처음 그려질 때, eventListener를 구독한다던가 API를 요청한다던가 할 수 있는데 이걸 side effect 라고 부른다.

useEffect는 이러한 side effect를 관리할 때 사용하는 훅이다.

React.useEffect( ( 첫번째 ) => { 인자 }, [ 두번째 인자 ] )

useEffect의 첫번째 인자 = 콜백함수
컴포넌트가 화면에 그려질 때 실행할 함수.
처음 화면에 그려질 때 , 리랜더링 될 때 실행된다.
무조건 랜더링 될 때마다 실행되는 건 아니다.

useEffect의 두번째 인자 = 의존성 배열(dependency array)
의존성 배열에 넣은 값이 변했을 때만 콜백함수를 실행할 수 있다.
의존성 배열이 비어있으면(값이 없으면) 첫 랜더링 시에만 실행된다.

useEffect는 한 컴포넌트에 여러개 사용해도 된다.

const [someValue, setValue] =React.useState("hi")

React.useEffect (() => {
    console.log(someValue);
},[someValue]);

React.useEffect (() => {
    console.log("첫 랜더링이야")
},[]);

위의 경우 첫 랜더링 시 콘솔에
"hi"
"첫 랜더링이야"
가 표시되고

재랜더링 시 콘솔에
"hi"

만 찍히는 걸 확인할 수 있다.

useEffect는 return값을 가질 수 있는데
이때 return 안에 들어가는 함수를 클린업 clean up이라 한다.

clean up이란
컴포넌트가 화면에서 사라지는 순간에 정리하는 함수다.
예를 들어 eventListener 실행정보는 컴포넌트가 화면에서 사라진 후에도 메모리에 유지될 이유가 없으므로 clean up을 이용해 메모리를 비우는 것이다.