React
React에서의 side effect와 effect hook
citron031
2022. 12. 7. 08:55
인자나 외부의 변수를 변경하지 않는 함수를 pure function이라고 한다.
이 pure function, 순수 함수는 만약 같은 인자를 전달 받는다면, 항상 똑같은 결과 값을 return한다.
따라서 pure function은 예측 가능한 함수이다.
하지만, 어떤 함수는 실행시 함수 외부의 환경에 영향을 줄 수 있다.
// 예시 //
let counter = 0;
function count(){
counter += Math.floor(Math.random() * 100);
}
count();
console.log(counter);위와 같은 함수는 외부의 counter 함수를 변경하며, 그 값을 예측 불가능하게 한다.
위와 같이 함수가 외부에 영향을 미치면 이를 side effect 라고 한다.
보통 React에서 side effect는 Ajax 요청이나 LocalStorage API를 사용하는 등 외부에서 데이터를 가져올 때와, react와 관계없는 API (setTimeout과 같은 타이머, LocalStorage 등) 을 사용할 때 이들이 react 컴포넌트에게는 side effect이다.
useEffect
React는 side effect를 다루기 위해서 effect Hook을 제공하고 이것이 useEffect이다.
클래스형 컴포넌트에서는 side effect를 처리하기 위해서 life cycle 매서드인 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 매서드를 사용했었다.
(함수형 컴포넌트에서는 useEffect를 통해서 같은 기능을 구현할 수 있다)
- useEffect는 첫 번째 인자로 함수를 받고, 두 번째 인자로 배열을 받는다.
- useEffect는 컴포넌트가 생성되었을 때, 새로운 props를 받았을 때, state가 변경되었을 때 실행되며, 첫번째 인자인 콜백함수를 실행한다.
(즉, 새롭게 컴포넌트가 렌더링 되었을 때 실행된다.) - 만약 조건부로 useEffect를 실행하고자 한다면, 두번에 인자로 배열을 넣는다.
- 이 배열의 이름은 dependency array라고 부르며, 이 배열 내부의 담긴 변수의 값이 변경될 때 useEffect가 실행되어 첫 번째 인자인 함수가 실행된다.
😺 두 번째 인자로 빈 배열을 넣는다면, 처음 컴포넌트가 생성되었을 때 단 한번만 useEffect가 실행된다.
let [name, setName] = useState("");
// ~ setName을 활용해 name을 변경 ~
useEffect(() => {
document.title = name;
}, [name]);
// name 변수가 수정될 때 마다 실행되어 html의 title을 변경한다.