어떤 컴포넌트가 마운트(화면에 첫 랜더링) 되었을 때,
어떤 컴포넌트가 업데이트(다시 랜더링) 되었을 때,
어떤 컴포넌트가 언마운트(화면에서 사라짐) 되었을 때,
➡
특정 작업을 처리할 코드를 실행시키고 싶다면 useEffect를 사용한다
useEffect() Hook은 인자로 콜백함수를 받는다.
콜백함수란 다른 함수의 인자로 전달받은 함수를 뜻한다.
콜백함수 내부에 우리가 원하는 작업을 처리해줄 코드를 작성하면 된다.
useEffect는 두가지 형태로만 사용된다.
1.
useEffect(() => { //작업 } );useEffect의 인자로 하나의 콜백함수만 받는 형태
2.
useEffect(() => { //작업 }, [value] );useEffect의 인자로 하나의 콜백함수와 하나의 배열을 받는 형태
이때 배열을 dependency array라고도 한다.
첫번째 형태는 컴포넌트가 랜더링 될 때 마다 매번 실행된다. 컴포넌트가 마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 함수가 실행되게 된다.
두번째 형태는 화면에 첫 랜더링 될 때, value값이 바뀔 때만 실행된다. 만약 두번째 인자로 빈 배열이 들어온다면 화면에 첫 랜더링 될 때만 함수가 실행된다.
