React Hook life cycle

ComponentDidMount

컴포넌트가 만들어지고 render가 호출된 이후에 호출되는 메소드. ( example : fetch or TImer )

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hook
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

 

ComponentWillUnmount

React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드.
DOM이 생성되지 않았으므로 DOM을 조작할 수 없고, render가 호출되기 전이기 때문에 setState를 사용해도 render가 호출하지 않음.

// Class
class Example extends React.Component {
    componentWillUnmount() {
        ...
    }
}

// Hook
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        };
    }, []);
}

Hook 에서는 useEffect 에서 함수를 리턴하는 형태로 구현

 

componentWillReceiveProps(nextProps

컴포넌트 생성후에 첫 렌더링을 마친 후 호출되는 메서드. (컴포넌트가 처음 마운트 되는 시점에서는 호출되지 않음.)
이 메소드 내부에서 setState를 사용해도 추가적인 렌더링이 발생하지 않음.
(example : props를 받아서 state를 변경해야 하는 경우 )

// Class
class Example extends React.Component {
    componentWillReceiveProps(nextProps) {
        ...
    }
    or
    UNSAFE_componentWillReceiveProps(nextProps) {
        ...
    }
}

// Hook
const Example = (props) => {
    const { value } = props;
    useEffect(() => {
        ...
    }, [value]);
}

 

ShouldComponentUpdate

shouldComponentUpdate가 불린 이후에 컴포넌트 업데이트 직전에서 호출되는 메소드.
새로운 props 또는 state가 반영되기 직전 새로운 값들을 받음.
이 메서드 안에서 this.setState()를 사용하면 무한 루프가 일어나게 된다.

주의

class 컴포넌트의 shouldComponentUpdate() 메서드와 달리, areEqual 함수는 props들이 서로 같으면 true를 반환하고, props들이 서로 다르면 false를 반환한다. 이것은 shouldComponentUpdate와 정반대의 동작이다.

// Class
class Example extends React.Component {
    shouldComponentUpdate(nextProps) {
        return nextProps.value !== this.props.value;
    }
}

// Hook
const Example = React.memo(() => {
    ...
}, (prevProps, nextProps) => {
    return nextProps.value === prevProps.value;
})