1. 생명주기 메서드
이 섹션에서 다루는 메서드들을 사용하면 React 컴포넌트를 만들 때에 마주치는 대부분의 경우를 해결할 수 있습니다. 이 생명주기 도표를 시각 자료로 활용하면 좋습니다.
2. class형 컴포넌트에서의 생명주기 메서드
componentDidMount()
componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.
이 메서드는 데이터 구독을 설정하기 좋은 위치입니다. 데이터 구독이 이루어졌다면, componentWillUnmount()에서 구독 해제 작업을 반드시 수행하기 바랍니다.
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다.
컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋습니다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 됩니다 (가령, props가 변하지 않았다면 네트워크 요청을 보낼 필요가 없습니다).
componentDidUpdate(prevProps) {
// 전형적인 사용 사례 (props 비교를 잊지 마세요)
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}componentWillUnmount()
componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다.
이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하세요.
3. useEffect Hooks
useEffect(didUpdate);
의존성이 변경될 때 전달된 함수 인자를 실행
명령형 또는 어떤 effect를 발생하는 함수를 인자로 받습니다.
useEffect를 사용하세요. useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 될 것입니다.
기본적으로 동작은 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행(조건부 effect)되게 할 수도 있습니다.
조건부 effect 발생
effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생하는 것입니다. 이와 같은 방법으로 만약 의존성 중 하나가 변경된다면 effect는 항상 재생성됩니다.
그러나 이것은 일부 경우에는 과도한 작업일 수 있습니다. source props가 변경될 때에만 필요한 것이라면 매번 갱신할 때마다 새로운 구독을 생성할 필요는 없습니다.
이것을 수행하기 위해서는 useEffect에 두 번째 인자를 전달하세요. 이 인자는 effect가 종속되어 있는 값의 배열입니다. 이를 적용한 예는 아래와 같습니다.
useEffect(() => {
const subscription = props.source.subscribe();
}, [props.source]);자 이제, props.source가 변경될 때에만 구독이 재생성될 것입니다.
effect 정리(정리 함수)
return () => {}
컴포넌트가 화면에서 사라질 때 수행되는 함수.
effect는 종종 컴포넌트가 화면에서 제거될 때 정리해야 하는 리소스를 만듭니다. 가령 구독이나 타이머 ID와 같은 것입니다. 이것을 수행하기 위해서 useEffect로 전달된 함수는 정리(clean-up) 함수를 반환할 수 있습니다. 예를 들어 구독을 생성하는 경우는 아래와 같습니다.
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
}, [props.source]);Tip: useEffect에서 componentDidUpdate만 사용하고 싶을 경우
const mounted = useRef(false);
useEffect(() => {
if (!mounted.current) { // componentDidMount 실행 X
mounted.current = true;
} else {
// componentDidupdate 로직
// (...)
}
}, [바뀌는 값]};(2) React 기본 강좌 6-6. Hooks에 대한 자잘한 팁들 - YouTube
4. class와 hooks 간단 비교
아래는 비슷한 기능을 하는 class형 컴포넌트에서의 라이프사이클 메서드와 useEffect hooks의 예시이다.
class 형
componentDidMount() {
this.setState{
imgCoord: 2,
score: 1,
result: 3
}
}
componentDidUpdate() {
this.setState{
imgCoord: 2,
score: 1,
result: 3
}
}class형 컴포넌트에서의 라이프사이클 메서드에서는 의존성들을 각각의 라이프사이클 메서드에서 관리할 수 있다.
hooks
useEffect(() => {
setImgCoord();
setScore();
}, [imgCoord, score]);
useEffect(() => {
setResult();
}, [result]);참조:
