사이드 이펙트와 마운트

리렌더링은 다시 한번 함수형 컴포넌트가 마운트되어지면서 함수형 컴포넌트 내부에 있는 코드들이 실행되는 것을 이야기한다.(물론 useEffect는 별개의 문제이고)

이 함수형 컴포넌트가 불려지면서 useState가 실행되고 useState를 통해 초기값을 부여했을 때 신기한 것을 알았다.

우리가 알듯 useState는 초기값으로 먼저 실행되었다가 상태값을 변경해주는데 소켓작업이나 로컬스토리지 작업을 하는 state를 초기화된 단계에서 다시한번 실행된다면?

신기하게도 초기화된 값이 나온다.(내가 생각하지 않은 결과이기 때문에 당연히 조치가 필요하다.)

이러한 문제를 해결해주는 것이 사이드 이펙트에서의 초기값 계산이다.

사이드 이펙트는 이 스크립트가 실행될 때 함수형 컴포넌트 이전에 실행되어지고 함수형 컴포넌트의 렌더링과정에서 의도하지 않는다면 다시 실행되지 않을 것이다. 즉, 리렌더링은 함수형 컴포넌트를 다시 호출함으로써 렌더링 작업이 다시 이루어지는 것인데, 사이드 이펙트에서 필요한 작업을 한다면?

const getLoacal = () => {

  const local = JSON.parse(localStorage.getItem("todolist"));

  return local;

};

const Main = () => {

  const [workingArray, setWorkingArray] = useState(getLoacal);

 

사이드 이펙트에서 로컬스토리지 값을 받아오고 그 값을 초기값으로 할당하도록 코딩

결과는 바로 내가 원하는 바처럼 애초에 상태값이 만들어질 때부터 내가 사이드 이펙트 함수를 통해 만들어놓은 값으로 만들어 줄 수 있게 되는 것이다.