인턴십 2주차 복습 (2) - useEffect

지난 시간에 이어 리액트의 렌더링과 관련된 내용을 학습했다. 리액트 렌더링에서 중요한 포인트는 리액트는 모든 렌더링 과정을 순수하게 유지한다.이다.
현대 소프트웨어에서 Side-Effect는 없을 수 없다. 사용자가 입력하는 값이 모두 같을 수도 없으며, 데이터베이스의 데이터가 변하지 않을 수도 없다.

• Side-Effect 란? 리액트 자체에서 제공하지 않는 모든 것을 말한다. HTTP 통신, 브라우저 Web API 사용 등 우리가 개발할 때 흔히 사용하는 것들이 해당한다.
  

그래서 리액트에는 순수한 렌더링 과정을 유지하기 위해 useEffect 훅이 존재한다.

useEffect

렌더링 이후 실행되는 함수이다. 해당 함수 내에 Side-Effect를 발생시키는 로직을 작성하면 모든 렌더링이 끝난 후 실행되기 때문에 렌더링 과정이 순수하게 유지될 수 있다.

첫번째 인자로는 effect 함수를, 두번째 인자로는 의존성 배열을 넘겨준다.

useEffect(()=>{}, [])

의존성 배열

의존성 배열에 담긴 값이 변경될 때마다 effect 함수가 실행된다. effect 함수가 의존하고 있는 요소들을 작성한다. 쉽게 말하면 effect 함수가 사용하고 있는 외부에 존재하는 값들을 넣어주면 된다.

주의할 점은 Object나 Function의 경우 렌더링마다 새로 생성되기 때문에 의존성 배열에 작성할 경우 무한 루프를 반복하게 된다.

• 무한 루프 해결 방법

  1. 함수를 effect 함수 내부로 넣는다 → 내부에 존재하기 때문에 의존성에서 제외할 수 있다.

  2. 컴포넌트 외부로 빼기

  3. useCallback 사용

     이 방법은 최후의 수단으로 사용하는 것이 좋고, 여러 effect 함수에서 동일한 함수 또는 객체를 사용할 경우 코드 중복을 줄이기 위해 사용하는 것이 좋다.
     코드의 중복은 유지/보수가 어렵고, 메모이제이션과 퍼포먼스 차이가 크게 나지 않기 때문에 메모이제이션이 더 효율적이다.