useState를 사용하여 state를 변경할 때, 컴포넌트의 모든 코드가 reRendering 됩니다.
소스코드가 작을 때는, 크게 문제가 되지 않을 수 있지만 컴포넌트 안에 API를 불러오는 등 외부 작업이 일어난다든가, 무거운 작업이 생길 때
이 모든 코드들을 다시 불러오는 것은 매우 효율적이지 못한 방법입니다.
useEffect(()=>console.log("I'm using effect log"), [])컴포넌트 안에를 넣어주면 컴포넌트가 렌더링 되더라도 이 코드는 단 한번만 수행됩니다.
input의 value를 변화시킬 때도 우리는 onChange와 state값을 이용해서 계속적으로 화면을 re-rendering 해주었습니다.
우리가 타자를 칠 때마다 계속적으로 컴포넌트를 렌더링 해주고, 그 때마다 수행되는 무언가가 있다면 문제가 생길 가능성이 높아집니다.
하지만 문제가 하나 더 생깁니다.
우리가 state값을 사용하는 이유는 re-rendering을 하기 위함입니다.
useEffect를 사용하면 다른 state값이 변화되더라도 re-rendering이 되지 않는다는건 알았지만,
내 state 값에 변화가 있을 때는 re-rendering이 이루어져야만 합니다.
console.log("this is for first state")이 console.log는 첫 번째 state값이 변화할 때 다시 렌더링되어 출력됐으면 합니다.
하지만 이걸
useEffect(()=>console.log("this is for first state"), [])이렇게 작성해주면 단 한번밖에 작동을 하지 않습니다.
이 때 뒤의 [] 가 빛을 발휘합니다.
useEffect(()=>console.log("this is for first state"), [first_state]);이렇게 설정을 해주면 이 effect는 다른 state값이 변화할 때는 다시 rendering되어 출력되지 않지만 first_state값이 변화할 때는 다시 렌더링 됩니다.
useEffect의 두번째 인자가 리스트인 이유는? state값을 여러개를 넣어줄 수 있기 때문입니다.
useEffect(()=>console.log("this is for first state and second state"), [first_state, second_state]);이렇게 말이죠
useEffect는 컴포넌트가 실행될 때 한 번만 수행이 된다고 했습니다.
그렇다면 자식 컴포넌트를 불렀다가, 없앴다가 하는 경우에는 어떻게 될까요?
state값을 이용해 showing 변수를 만듭니다.
그리고 버튼을 하나 만들어 showing의 값을 true / false 로 변화시키고
showing값에 따라 컴포넌트를 나타나게 했다가, 사라지게 했다가 하는 코드를 만들어봅니다.
const [showing, setShowing] = useState(false);
const onClick = () => setShowing(current => !current)
const Hello = () => {
useEffect(()=>{console.log("등장")
return () => console.log("퇴장")
}, [])
return <h1> 등장 </h1>
}
function App(){
return(
<div>
{showing ? <Hello /> : null}
<button onClick={onClick}>{showing ? "Hide" : "Show"}/button>
</div>
)
}이런식으로 코드를 작성해주면 클릭할 때 마다 Hello 컴포넌트가 사라졌다가 다시 등장하면서 useEffect로 설정해둔 값이 계속 한 번씩 출력되게 될 겁니다.
이 때 컴포넌트가 사라지면서 수행할 동작도 정의해 줄 수가 있습니다.
cleanup Function이라고 불리우는데, 이 컴포넌트가 사라질 때 수행할 동작을 정의해주는 겁니다.
Hello 컴포넌트의 useEffect 부분을 보면 첫 번째 인자에 함수를 넣어주면서 return값도 설정을 해주었습니다.
이렇게 return값을 설정해주면 이 컴포넌트가 사라질 때 수행할 기능도 작성이 가능한거죠.
정리
-
useEffect의 첫 번째 인자에 넣어준 함수는 다른 state값이 바뀌면서 컴포넌트가 re-rendering 되더라도 한 번만 수행된다
-
useEffect의 두 번째 인자 리스트에 넣어줄 값은 state값으로 이 useEffect는 리스트에 넣어준 state값이 변화할 때는 re-rendering될 때 마다 같이 수행된다.
-
useEffect는 컴포넌트가 처음 렌더링 될 때 같이 수행되며,return 안에 callback함수를 사용(cleanup function)해줌으로써 컴포넌트가 사라질 때 수행할 기능을 정의할 수도 있다.
