useEffect

useEffect란?

• useEffect를 사용하면 component가 rendering 될 때마다 콜백 함수의 내용을 실행시킬 수 있게 된다.

언제 rendering 될까?

• useState를 통해 state 변수의 값을 바꿀 때 rendering 된다. 즉, 바뀌는 값이 존재하지 않으면 useEffect는 아무런 의미를 갖지 않는다.

2번째 parameter의 의미는?

1. 無

맨 처음 렌더링 될 때 한 번, 그 후 어떤 state가 하나라도 바뀔 때마다 콜백 함수가 실행된다.

2. []

맨 처음 렌더링 될 때 한 번만 콜백 함수가 실행된다.

3. [stateExample]

맨 처음 렌더링 될 때 한 번, 그리고 stateExample이 바뀔 때 콜백 함수가 실행된다.

return의 의미는?

  useEffect(() => {
    console.log("useEffect");

    fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
      .then(response => response.json())
      .then(json => setItems(json));

    return () => {
      console.log("clean-up");
    };
  }, [resourceType]);

• 렌더링을 마친 상태에서 새로 렌더링 할 때 return이 먼저 실행되고 난 후 콜백 함수가 마저 실행된다.
• 즉, 렌더링이 될 때 clean-up > useEffect 순으로 출력된다.

Component 내의 코드는 어떤 순서를 갖을까?

function App() {

  console.log("1");

  useEffect(() => {
    console.log("useEffect");
  });

  console.log("2");
  
  return (
  // ..
  );
}

• 1 > 2 > useEffect 순으로 출력된다.
• useEffect는 맨 나중에 실행되는 것으로 알고있자.
• useEffect의 2번째 parameter가 없으면 rendering될 때마다 실행된다. 이는 useEffect 없이 선언된 함수와 동일한 의미를 갖는다.

의도치 않게 useEffect가 한 번 더 실행될 때

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

• index.js에서 <React.StrictMode>가 <App />을 감싸고 있었기 때문에 useEffect가 한 번 더 실행될 수 있다.
• 현재 <React.StrictMode>를 지워도, 지우지 않아도 useEffect가 문제 없이 실행된다(?).
• React의 내부 동작 원리를 완전히 파악하고 있어야할 필요성을 느꼈다.

결론

• useEffect의 전반적인 개념을 이해했다고 해서 어느 상황에서 사용하는지 판단하는데 익숙해진 것은 아니라고 생각한다. 이 부분은 개인 프로젝트를 진행하면서 몸으로 터득해야겠다.
• HTML의 기초적인 부분을 간과해서는 안된다고 느꼈다. button태그의 속성 onClick이나 input태그의 onChange 등 자주 쓰는 것들을 따로 공부할 필요가 있다.