[React] useEffect와 sideEffect
useEffect란?
React에서 제공하는 useEffect()는 sideEffect를 처리하기 위해 사용한다고 한다. 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구라고 생각하면 된다. 즉, 렌더링 이외에 일으켜야하는 sideEffect를 일으킬 탈출구라고 보면 된다. sideEffect를 렌더링 이후에 발생하며 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킨다.
SideEffect란?
sideEffect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 sideEffect라 한다. 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있다.
sideEffect는 절차형 프로그래밍에서 흔히 존재하는 작업이었고 무조건 나쁜 패턴이라고는 볼 수 없다. 하지만 sideEffect는 프로그램을 읽기 어렵게 하고, 실행상태를 예측하기 어렵게 하며 개발비용을 증가시킨다고 보기 때문에 최근 선언형 프로그래밍에서는 sideEffect를 최소화하는 방향으로 변하고 있다. 함수는 전달받은 매개변수를 통해 연산을 수행하고 결과를 반환해야 하며 그 결과는 항상 일관되고 예측할 수 있어야 프로그램이 쉽고 단순하며 유지보수 하기 쉬워지기 때문이다.
SideEffect 두 종류
- 정리(clean-up)이 필요한 것
- 정리가 필요하지 않은 것 (network request, DOM 수동조작, 로깅 등)
React에서 sideEffect 처리
React에서는 sideEffect 처리를 위해 useEffect 함수를 제공한다. 함수가 매개변수를 받아 결과를 생성하는 것과 무관한 외부의 상태를 변경하거나 외부와 상호작용해야 하는 코드는 useEffect() 함수를 통해 분리해야한다.
function UserProfile({ name }) {
const message = `${name}님 환영합니다!`; //함수 반환 값 생성
// Bad!
document.title = `${name}의 개인정보`; //함수 외부와 상호작용하는 Side-effect 코드
return <div>{message}</div>;
}
위 코드는 함수형 컴포넌트가 실행되고 결과를 생성하는 것과 무관하게 document.title을 수정하고 있다. 이러한 코드는 작은 프로그램을 개발할 때는 문제가 없겠지만, 프로그램 규모가 커지고 복잡해지면 실행상태를 예측하기 힘들게 된다.
개발자는 React가 컴포넌트를 다시 렌더링하는 시점을 정확히게 통제하기 어렵다. 따라서 개발자들은 React가 다시 렌더링할 때마다 발생하는 프로그램의 지연 원인을 찾는라 많은 시간을 보내게 되는 상황이 발생한다.
React에서는 useEffect를 통해서 sideEffect 코드를 등록할 수 있으며 React가 알아서 적절한 시점에 sideEffect 작업을 수행해 줄 것이다. 이러한 처리는 함수형 컴포넌트가 빠르게 렌더링 될 수 있게 도와주며, 프로그램을 복잡하게 만드는 sideEffect 영역을 함수화 분리할 수 있게 도와준다.
function UserProfile({ name }) {
const message = `${name}님 환영합니다!`;
//Side-Effect 코드를 UseEffect로 분리
useEffect(() => {
document.title = `${name}의 개인정보`;
}, [name]);
return <div>{message}</div>;
}
위 코드와 같이 useEffect를 사용하면 어떤 개발자라도 컴포넌트에 sideEffect가 포함되어 있다는 것을 알 수 있다. 또한 React에서는 useEffect에 등록된 sideEffect 코드를 최적화된 시점에 실행하기 때문에 컴포넌트의 실행속도를 개선하는데 도움이 된다.
출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다