React Class vs React Hooks Lifecycle 비교 정리

React Class에서 사용하는 Lifecycle과 React Hooks에서 사용하는 Lifecycle의 차이점을 비교 정리한다.

ComponentDidMount

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

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

ComponentWillUnmount

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

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

ComponentWillReceiveProps

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

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

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;
})

주의

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

ComponentDidUpdate

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

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