[React.js] useEffect, 필요한 부분만 골라 랜더링 하기

useState에서 설정한 데이터가 변경되어 컴포넌트를 랜더링 하게 되면

컴포넌트 이하의 모든 코드들이 실행된다.

useEffect는 랜더링 될 때 특정 값이 변하지 않으면 해당 코드를 실행하지 않게 도와준다.

 

사용방법은,

useEffect(함수1 return 함수2, [배열])

- 함수1 : 마운트 될 때 실행되는 함수

- 함수2 : 언마운트 될 때 실행되는 함수

- [배열] : 함수를 실행시키는 기준 데이터(데이터가 변할 시 함수가 실행된다)

** 위에서 마운트/언마운트는 컴포넌트의 시작과 종료를 뜻한다.

 

만약 [배열]에 값을 넣지 않고 빈 배열' [ ] '로 놓으면 컴포넌트가 마운트 될 때만 실행된다.

 

useEffect(() => {
console.log("컴포넌트 마운트", toDos);
return console.log("컴포넌트 언마운트");
}, [toDos]);

toDos가 변할 때마다 함수가 실행된 모습

만약 toDos와 관련이 없는 다른 useState에 의하여 컴포넌트가 랜더링이 된다면

위의 함수는 실행되지 않을 것이다.