리액트 클래스 컴포넌트: state, 생명주기, 변환

클래스 컴포넌트는 React.Component를 상속하고 render() 메서드에서 JSX를 반환하는 자바스크립트 클래스입니다. this.props에서 props를 읽고, this.state에 state를 보관하며, this.setState()로 업데이트합니다. 새 코드에서는 훅을 쓰는 함수 컴포넌트가 클래스를 대체했지만, 클래스는 여전히 완전히 지원되고, 많은 오래된 코드베이스에 등장하며, 에러 바운더리를 작성하는 유일한 방법입니다.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

각 카운터는 자기만의 state를 유지합니다. 세 번째 <Counter label="Plums" />를 추가하면 그것도 0부터 시작합니다.

클래스 컴포넌트의 구조

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• 클래스는 Component(또는 import React from 'react'와 함께 React.Component)를 상속합니다.
• render()는 필수입니다. 함수 컴포넌트의 본문처럼 순수해야 합니다. this.props와 this.state를 읽고 JSX를 반환합니다.
• this.props에 props가 들어 있습니다. 읽기 전용입니다.
• state는 constructor에서 설정하거나(먼저 super(props)를 호출합니다), 요즘 더 흔하게는 클래스 필드로 설정합니다: state = { visits: 1 };.
• static defaultProps는 React 19에서도 클래스에서는 여전히 동작합니다(함수 컴포넌트에서만 제거되었습니다).

this.setState는 병합하고, 업데이터를 받을 수 있습니다

setState는 useState의 setter와 두 가지가 다릅니다. 넘긴 객체를 현재 state에 병합하므로 이름을 지정한 키만 업데이트합니다. 그리고 모든 React state 업데이트처럼 즉시 적용되지 않으므로, 다음 값이 이전 값에 의존한다면 업데이터 형태를 쓰세요.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects"는 세 호출 모두 같은 this.state.likes를 읽으므로 1만 더합니다. "+3 with updaters"는 3을 더합니다. "Move to Paris"는 name과 likes를 유지하지만(병합) zip을 잃습니다. 병합이 한 단계 깊이까지만 이루어지기 때문입니다. 유지하려면 address: { ...this.state.address, city: 'Paris' }라고 쓰세요. setState의 선택적인 두 번째 인자는 업데이트 후에 실행되며, 콘솔은 그곳에서 새 주소를 보여 줍니다.

이벤트 핸들러 바인딩

onClick={this.handleClick}으로 넘긴 메서드는 나중에 객체 없이 일반 함수로 호출되므로, 그 안의 this는 undefined입니다.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

첫 번째 버튼은 undefined의 setState를 읽는 것에 관한 TypeError를 기록합니다. 두 번째 버튼은 클래스 필드의 화살표 함수가 인스턴스가 만들어질 때 this를 붙잡으므로 동작합니다. 레거시 코드에서 여전히 흔한 예전 해결책은 생성자에서 바인딩하는 것입니다.

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

인라인 화살표 함수 onClick={() => this.handleClick()}도 동작합니다.

생명주기 메서드

클래스는 정해진 이름의 메서드로 마운트, 업데이트, 언마운트에 반응합니다. 가장 많이 보게 될 것들은 다음과 같습니다.

• componentDidMount(): 첫 렌더링이 DOM에 들어간 뒤. 타이머, 구독, 요청을 시작하세요.
• componentDidUpdate(prevProps, prevState): 업데이트마다 그 뒤. 작업하기 전에 이전 값과 비교하세요. 그렇지 않으면 반복에 빠집니다.
• componentWillUnmount(): 제거 전. componentDidMount가 시작한 것을 되돌리세요.
• shouldComponentUpdate(nextProps, nextState): 렌더링을 건너뛰려면 false를 반환하세요.

컴포넌트 생명주기 페이지에 전체 목록, 실행 순서, 그리고 모든 메서드를 기록하는 컴포넌트가 있습니다.

클래스를 함수 컴포넌트로 바꾸기

다음은 흔한 생명주기 메서드 세 개를 모두 쓰는 클래스입니다. 1초마다 틱하고, label prop이 바뀌면 로그를 남기고, 제거될 때 타이머를 멈춥니다.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

그리고 같은 컴포넌트를 함수로 쓴 것입니다. 각 생명주기 메서드가 이펙트의 일부가 되고, 관련된 setup과 클린업이 두 메서드에 나뉘지 않고 서로 옆에 있습니다.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

두 타이머 모두 같은 방식으로 세고, label이 바뀔 때마다 로그를 남깁니다. 이펙트는 첫 렌더링 후에도 실행되므로 함수 버전은 마운트 시에도 한 번 로그를 남깁니다. 어떤 변환이든 단계는 다음과 같습니다.

1. this.props.x는 구조 분해한 prop { x }가 됩니다.
2. this.state의 각 키는 자기만의 useState가 됩니다. setter는 병합하지 않고 교체한다는 점을 기억하세요.
3. 메서드는 컴포넌트 안의 일반 함수가 됩니다. 바인딩이 필요 없습니다.
4. componentDidMount, componentDidUpdate, componentWillUnmount는 useEffect 호출이 되며, 언제 실행되는지가 아니라 무엇을 하는지에 따라 묶습니다.
5. createRef는 useRef가 되고, this.context와 함께 쓰는 static contextType은 useContext나 use가 됩니다.

에러 바운더리는 클래스로 남겨 두세요. 대응하는 함수 형태가 없습니다.

PureComponent

일반 클래스 컴포넌트는 부모가 렌더링될 때마다 렌더링됩니다. PureComponent는 먼저 새 props와 state를 이전 것과 한 단계 깊이로 비교하고, 아무것도 바뀌지 않았으면 렌더링을 건너뜁니다. React.memo의 클래스 버전입니다.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

버튼을 클릭해 보세요. PureLabel은 같은 text를 보므로 PlainLabel rendered만 기록됩니다. 둘 다에 text={'hello ' + clicks}를 넘기면 클릭할 때마다 둘 다 렌더링됩니다.

비교가 얕기 때문에, 부모가 렌더링될 때마다 새 객체나 함수가 되는 prop(style={{ color: 'red' }}, onClick={() => ...})은 비교를 무력화합니다. React.memo와 같은 함정입니다.

React 19가 클래스에서 제거한 것

오래된 클래스 코드를 유지 보수한다면, 몇 가지 패턴은 React 19에서 더 이상 동작하지 않습니다.

• 문자열 ref(this.refs.input과 함께 쓰는 ref="input"). createRef()나 ref 콜백을 쓰세요.
• 레거시 컨텍스트(contextTypes, childContextTypes, getChildContext). static contextType과 함께 createContext를 쓰세요.
• propTypes 는 무시됩니다. TypeScript나 직접 만든 검사를 쓰세요.
• findDOMNode 는 사라졌습니다. 대신 DOM 요소에 ref를 붙이세요.

예전의 componentWillMount, componentWillReceiveProps, componentWillUpdate 메서드도 레거시입니다. 이전 이름과 UNSAFE_ 이름(UNSAFE_componentWillMount 등) 모두로 여전히 실행되지만, 지원 중단되었고 StrictMode가 경고합니다. 그 코드는 componentDidMount, componentDidUpdate, getDerivedStateFromProps로 옮기세요.