티스토리 뷰

Web/React

[React] useEffect()와 Side-Effect

해구름 2021. 6. 18. 10:29
반응형

useEffect()?

React에서 제공하는 useEffect()는 Side-Effect를 처리하기 위해 사용한다고 합니다. 그렇다면 Side-Effect는 무엇일까요? 의료계에서 말하는 부작용의 의미는 아니고, 컴퓨터 공학에서 사용하는 다른 의미가 존재합니다.

Side-Effect?

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말합니다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있습니다.

Side-Effect는 절차형 프로그래밍에서 흔히 존재하는 작업이었고 무조건 나쁜 패턴이라고는 볼 수 없습니다. 하지만 Side-Effect는 프로그램을 읽기 어렵게 하고, 실행상태를 예측하기 어렵게 하며 개발비용을 증가시킨다고 보기 때문에 최근 선언형 프로그래밍에서는 Side-Effect를 최소화하는 방향으로 변하고 있습니다. 함수는 전달받은 매개변수를 통해 연산을 수행하고 결과를 반환해야 하며 그 결과는 항상 일관되고 예측할 수 있어야 프로그램이 쉽고 단순하며 유지보수 하기 쉬워지기 때문입니다. 

React에서 Side-Effect처리

React에서는 Side-Effect 처리를 위해 useEffect()함수를 제공합니다. 함수가 매개변수를 받아 결과를 생성하는 것과 무관한 외부의 상태를 변경하거나 외부와 상호작용해야 하는 코드는 useEffect() 함수를 통해 분리해야합니다. 예를 들어 아래는 Side-Effect가 있는 함수로서 React에서는 아래와 같은 코드 작성을 권장하지 않습니다.

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`//함수 반환 값 생성

  // Bad!
  document.title = `${name}의 개인정보`//함수 외부와 상호작용하는 Side-effect 코드
  return <div>{message}</div>;
}

위의 코드는 함수형 컴포넌트가 실행되고 결과를 생성하는 것과 무관한 document.title을 수정하고 있습니다. 이러한 코드는 작은 프로그램을 개발할 때는 문제가 없겠지만, 다양한 개발자들이 대규모 프로그램을 협업 개발할 때 실행상태를 예측하기 힘들게 합니다.

만약 document.title을 수정하는 대신에 무거운 작업을 수행하는 코드였다면, 컴포넌트가 렌더링 될 때마다 프로그램을 지연시키게 될 것입니다. 개발자는 React가 컴포넌트를 다시 렌더링하는 시점을 정확하게 통제하기 어렵습니다. 따라서 개발자들은 React가 다시 렌더링할 때마다 발생하는 프로그램의 지연 원인을 찾느라 많은 시간을 보내게 될 것입니다.

React에서는 이러한 Side-Effect 작업을 useEffect()를 통해서 분리할 수 있도록 지원합니다. useEffect()를 통해서 Side-Effect 코드를 등록할 수 있으며 React가 알아서 적절한 시점에 Side-Effect 작업을 수행해 줄 것입니다. 이러한 처리는 함수형 컴포넌트가 빠르게 렌더링 될 수 있게 도와주며, 프로그램을 복잡하게 만드는 Side-Effect 영역을 함수와 분리할 수 있게 도와줍니다.

위의 코드를 useEffect()로 분리하면 다음과 같습니다.

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  //Side-Effect 코드를 UseEffect로 분리
  useEffect(() => {
    document.title = `${name}의 개인정보`
  }, [name]);
  return <div>{message}</div>;
}

위와 같이 useEffect()를 사용하면 어떤 개발자라도 컴포넌트에 Side-Effect가 포함된 다는 것을 알 수 있습니다. 또한 React에서는 useEffect()에 등록된 Side-Effect 코드를 최적화된 시점에 실행하기 때문에 컴포넌트의 실행속도를 개선하는데도 도움이 될 것입니다.

References

댓글