[React] 리액트와 Side Effect

⚡ Side Effect(부수효과)란

---

Side Effect는 함수의 실행으로 함수 외부 상태가 변경되는 것, 함수의 순수성을 해치는 것들을 의미합니다.

 

반대로 함수에 Side Effect가 없다면 그 함수는 순수함, 즉 순수 함수임을 의미합니다.

 

Side Effect와 순수 함수라는 개념은 뗄레야 뗄 수 없는 관계이기 때문에
순수 함수란 무엇인지 알아보겠습니다.

 

📌 순수 함수

순수 함수는 함수형 프로그래밍에서 다음과 같은 의미를 갖습니다.

• 동일 입력에는 항상 같은 값을 반환해야 합니다.
• 반환되는 값은 외부 데이터의 개입 없이 입력에만 의존해야 합니다.
• 함수 실행으로 인한 Side Effect가 없어야 합니다.

이런 성질을 갖고 있는 순수 함수는 멱등성을 가지고 있다고도 할 수 있습니다.

 

🔎 멱등성

연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미합니다.

 

 

⚡ React에서 Side Effect란

---

위에서 설명했듯 Side Effect란
함수 내에서 동일한 입력에 대해 같은 결과를 보장할 수 없도록 하는 것,
함수 실행 과정에서 외부의 값을 변경하는 것이라고 요약할 수 있습니다.

 

리액트에서 Side Effect는 다음과 같습니다.

• 서버에서 API 호출
• 함수 외부 값 변경
• 쿠키 및 브라우저 스토리지 이용
• 브라우저 직접 변경 (document, window)
• 시간 관련 함수 사용 (setTimeOut, setInterval)

위와 같은 Side Effect는 개발 시 반드시 필요한 존재이지만
일관되지 않은 결과를 반환하고 예측을 어렵게 하기 때문에
적재적소에 배치하고 복잡도와 볼륨을 줄여 최대한 예측 가능한 코드를 작성해야합니다.

 

📌 useEffect

리액트에서는 Side Effect를 처리하기 위해 useEffect라는 훅을 제공하고 있습니다.

 

useEffect는 의존성 배열(dependency array)에 따라 부수효과를 발생시키기 때문에
렌더링 과정이 종료되면 실행되도록 Side Effect를 분리합니다.

 

만약 렌더링 과정 중 리액트 로직에 의도치 않은 변경이 생긴다면
어떠한 성능 문제와 오류를 발생시킬 지 모르는 일입니다.

 

마무리하며 꼭 필요한 Side Effect는 반드시 필요한 존재이기 때문에 적절히 사용하되,
useEffect로 처리할 필요 없는 로직은 최대한 지양하는 방향으로 코드를 작성해보겠습니다.