[React] 07. Component Side Effect

07. Component Side Effect

useEffect를 통해서 변수의 상태를 변경 시킴으로 일어나는 사이드 이펙트를 관리하는 방법을 배웠다.

• side-effect는 부정적인 의미로만 쓰이는 것이 아닌, 한 변수의 변화로 인해 함수 외부의 값이 변화하거나 일어나는 현상을 side-effect라고 한다.

• useState의 초기값의 lazy한 inital을 필요로 할때에는 useState(()=>window.localStorage.getItem('initial')) 를 통해 가져올 수 있다.

• React.useEffect(() => { window.localStorage.setItem("initial",initial)},[initial])

• useEffect라는 Hook은 update가 되었을 때, 특정작업을 하며, 컴포넌트가 mounted 됬을때와, unmount 되었을때 특정 작업을 처리할 수 있는 Hook이다.

• 실례로, 뒤의 배열인 initial을 제거 하고, useEffect를 쓰면 최초 렌더링 시, 실행되는 것을 확인할 수 있다.

• 용어를 정리하면, 뒤의 의존값에 들어가는 것을 deps, 그리고 return 되는 함수가 clenup

• deps내의 의존성이 있을때에는 해당 의존성이 값이 변화할때 effect 내의 cleanup 후 useEffect내의 함수가 실행된다. (최초 렌더시에 useEffect가 실행된다.)

• 만약 deps의 의존성이 빈배열일 때에는, 렌더시에만 실행이 된다.

• 그리고 deps가 없을때에는 mounted 될때 useEffect가 실행이 되고, unmounted가 될때 cleanup이 실행이 된다.

• 좀 더 자세한 설명은 밑의 링크를 보면 되고, 화면이 렌더링 되는 시점과 연관되어서는 더 공부를 해야겠다.

자세한 설명 : https://rinae.dev/posts/a-complete-guide-to-useeffect-ko