리액트 클래스형 컴포넌트 생명주기 및 사용법 정리

2023-05-27

리액트 클래스형 컴포넌트 생명주기

클래스형 컴포넌트 예시

import React, { Component } from 'react';

class 컴포넌트명 extends Component {
    // 클래스 컴포넌트 생명주기 함수 작성 위치

    render() {
        const { 변수명 } = this.props;
        return (
            // 렌더링 시 화면에 그려줄 JSX 리턴
        }
    }
}

export default 컴포넌트명;

공식 문서는 클래스형 컴포넌트보다 함수형 컴포넌트 사용을 권장하고 있습니다.

아래의 클래스 컴포넌트 생명주기 함수들은 컴포넌트 내에서 재정의하여 사용할 수 있습니다.

컴포넌트 생성 시 실행되는 함수

constructor(props) {
    super(props);
    // 렌더링 전 처리 (state 초기값 설정 등)
}

컴포넌트 렌더링, 리렌더링 전 실행되는 함수

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.변수명 !== prevState.변수명) {
        return { 변수명: nextProps.변수명 };
    }
    return null;
}

마운트(첫 렌더링), 업데이트(리렌더링) 전 호출되는 함수입니다. props로 받은 값을 return 하여 state를 변경할 수 있습니다.

컴포넌트 리렌더링 직전 실행되는 함수

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.변수명 === '조건') {
    	return true;
    }
    return false;
}

리렌더링 시 render 함수 직전 호출되는 함수입니다. 렌더링 여부를 return 할 수 있습니다.

컴포넌트 렌더링 시 실행되는 함수

render() {
    return (
        // 렌더링 시 화면에 그려줄 JSX 리턴
    )
}

함수형 컴포넌트에서는 render 없이 return하여 컴포넌트를 렌더링 할 수 있습니다.

SVG 파일 렌더링 예시

return (
    <svg
        width={width}
        height={height}
        viewBox={`0 0 ${width} ${height}`}
        fill={fill}
        xmlns="http://www.w3.org/2000/svg"
    >
        <path d="M18 0H9v2.5h9V0z" fill={stroke} />
        <path
            opacity=".45"
            fillRule="evenodd"
            clipRule="evenodd"
            d="m23.358 7.298-1.656 1.657A10.493 10.493 0 0 1 13.5 26C7.69 26 3 21.3 3 15.5 3 9.702 7.702 5 13.5 5c2.473 0 4.748.863 6.557 2.31l1.656-1.657c.595.49 1.144 1.05 1.645 1.645zM14.5 17H12v-6h2.5v6z"
            fill={stroke}
        />
    </svg>
)

위와 같이, 수학 공식으로 이미지를 저장하는 svg 파일 태그를 return하여 그려주는 것도 가능합니다.
SVG 파일은 용량이 작고 확대해도 깨지지 않으며, 웹 디자인 툴 Figma에서 디자인 후 내보내기 할 수 있습니다.

컴포넌트 첫 렌더링 후 실행되는 함수

componentDidMount() {
    // 렌더링 후 Dom 업데이트 완료 시 처리
}

컴포넌트 리렌더링 후 실행되는 함수

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.변수명 !== this.props.변수명) {
        return '리턴값';
    }
    return null;
}

리렌더링 후 DOM 업데이트 전 호출되는 함수입니다. return 하면 componentDidUpdate 함수에서 snapshot 변수로 받습니다.

componentDidUpdate(prevProps, prevState, snapshot) {
    // 리렌더링 후 Dom 업데이트 완료 시 처리
}

리렌더링 후 DOM 업데이트가 완료되면 호출되는 함수입니다.

컴포넌트 제거 전 실행되는 함수

componentWillUnMount() {
    // 마운트 해제되어 화면에서 Dom이 제거되기 전 처리
}

리액트 클래스형 컴포넌트 사용법

부모 컴포넌트에서 파라미터 넘겨주는 방법

함수명() {
    // 함수 처리
}

render() {
    const 변수명 = 값;
    <하위컴포넌트명 파라미터명1={변수명} 파라미터명2={() => this.함수명()} />
}

위와 같이 부모 컴포넌트 렌더 시 하위 컴포넌트에 파라미터를 넘겨주면, 하위 컴포넌트에서 this.props.파라미터명으로 받을 수 있습니다.

부모 컴포넌트에서 받은 함수 실행 방법

this.props.파라미터명();

현재 컴포넌트 state에 데이터 저장 방법

this.state = {
    변수명1: this.props.파라미터명,
    변수명2: '데이터',
    리스트명: { 변수명: 값 }
};

현재 컴포넌트 state 변경 방법

this.setState({
    변수명1: '변경데이터',
    변수명2: '변경데이터'
});

this.setState((state) => { 변수명: state.변수명 + 1 });

this.setState({
    리스트명: this.state.리스트명.set('변수명', '변경데이터')
});

setState 함수를 사용하지 않고 직접 state를 수정하면, 바뀐 state로 render 함수를 호출하지 않아 리렌더링이 안될 수 있습니다.

현재 컴포넌트 state에 저장된 데이터 꺼내는 방법

this.state.get('변수명');

this.state.리스트명.get('변수명');