20221113 TIL useEffect

 

리액트에서 외부 API와 동기화를 할 때 useEffect를 사용한다.

useEffect를 제대로 사용하려면 리액트 컴포넌트의 생명주기를 제대로 인지하고 있어야 하는 줄 알고 있었는데,

새로운 리액트 공식 문서를 보다가 생명주기보다 start/stop cycle에 초점을 두고 이해하는 것이 바람직하다는 것을 읽게 되었다.

 

일단은 생명주기도 명확히는 몰랐기 때문에 생명주기에 대해서도 알아보았다.

어떤 컴포넌트가 DOM에 처음 렌더링 되는 것을 마운팅이라고 한다.

그리고, 컴포넌트에 의해 생성된 DOM이 삭제되어 사라지는 것을 언마운팅이라고 한다.

그리고 마운팅과 언마운팅 사이에 props나 상태가 바뀌어 업데이트될 수 있다.

그리고 마운팅과 언마운팅, 업데이트 시에 어떤 코드를 실행시키고 싶다면 useEffect를 사용하면 되는데,

useEffect를 이해할 때는 이 방식보다는 start/stop cycle방식으로 이해하는 게 좋다고 한다.

https://static.vecteezy.com/system/resources/previews/005/155/691/original/simple-modern-icon-start-and-stop-button-simple-flat-style-set-collection-graphic-free-vector.jpg

useEffect는 컴포넌트를 외부 시스템과 동기화할 때 사용하는데,

동기화를 시작할 때 실행할 코드가 useEffect에 들어가고, 동기화를 멈출 때에 실행하고 싶은 코드를 useEffect에서 return 뒤에 쓴다.

그리고 만약 어떤 값의 변화에 따라 기존 동기화를 멈추고, 동기화를 새로 시작하고 싶다면

그 값을 useEffect의 dependencies에 넣어주면 된다.

useEffect(() => {
  동기화를 시작할 때 실행할 코드

  return () => {동기화를 멈출 때 실행할 코드};

}, dependencies);

 

기존에 생명주기를 기준으로 useEffect를 이해했어서 start/stop cycle방식이 꽤 어색하지만,

앞으로는 동기화의 시작과 끝 관점으로 생각을 해봐야겠다.

어떤 한 사이클에서 동기화를 시작할 때 effect가 적용되고, 그 동기화가 끝날 때 cleanup이 된다.

dependencies가 없다면 매 렌더시마다 동기화를 시작했다가 끝내게 되는 것이고,

dependencies가 빈 배열이라면 컴포넌트가 생겼을 때 동기화를 시작했다가 컴포넌트가 사라질 때 동기화를 끝내게 되고,

dependencies에 어떤 값이 있다면 첫 렌더링 시 동기화를 시작했다가 dependencies에 해당하는 값이 바뀌면 기존 동기화를 끝내고 새로운 동기화를 시작하게 된다.

라고 지금은 이해하고 있는데, 앞으로 리액트를 사용하면서 이해도가 올라가면 다시 멘탈 모델을 다듬어봐야겠다.

 

많은 글들은 useEffect를 아직 생명 주기로 설명하고 있기 때문에

공식 문서를 찾아보지 않았다면 더 바람직한 사고 방식이 있는지 몰랐을 것이다. 

제대로 모르는 내용은 꼭 공식 문서에서 찾아봐야겠다.

 

참고

https://beta.reactjs.org/learn/lifecycle-of-reactive-effects