React 클래스 컴포넌트(Class Component)

React에는 Component를 만들때 크게 Class Component와 Functional Component 방식으로 컴포넌트를 만들 수 있다.

오늘은 그 중 Class Component를 다뤄보려 한다.

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Class형 컴포넌트는 기본적으로 위와 같은 라이프사이클을 따른다.

컴포넌트 안에서 각 사이클에 도달하였을 때 실행될 행동을 지정할 수 있는데, 아래와 같이 작성하면 된다.


class TestComponent extends React.Component {
  constructor() {
    // 컴포넌트가 실행되었을 때 실행됨.
  }

  componentDidMount() {
    // 컴포넌트 Mount가 완료된 후 실행됨.
  }

  componentDidUpdate() {
    // 컴포넌트의 props, state 값 변경 혹은 forceUpdate() 호출시에 실행됨.
  }

  componentWillUnmount() {
    // 컴포넌트가 Mount 해제되기 전에 실행됨.
  }

  render() {
    // state 변경 등의 컴포넌트 업데이트 실행되고 난 후 실행됨.
  }
}

또한 Constructor에서는 State를 선언하거나 Props를 받아올 수 있다.

Props에 관한 간단한 예제를 살펴보자면,


// main.js
<TestComponent
  name={'ian'}
  age={22}
/>

// test.js
class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    // props에는 main.js에서 호출시에 입력한 props인 name과 age가 담긴다.
    console.log(props.age); // 22
  }

  componentDidMount() {
    // this를 이용하여 다른 함수에서도 불러올 수 있다.
    console.log(this.props.name); // ian
  }
}

Props는 생성시에 필요한 값들이나 변경되지 않는 변수 값들을 입력하기에 적합하게 만들어졌다.

혹은 아래와 같이 Props의 기본 값을 지정할 수 도 있다.


// main.js
<TestComponent
  age={22}
/>

// test.js
class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(props.age); // 22
    console.log(props.name); // ian
  }
}

TestComponent.defaultProps = {
    name: 'ian',
};

이번에는 State에 대해 알아보자.


// main.js
<TestComponent />

// another test.js
class TextComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'ian',
      age: 22,
    }
  }

  render() {
    const { name, age } = this.state;
    return (
      <div>
        <p>{`${name}님, 내년이면 ${age + 1}살이시네요.`}</p>
        <button
          onClick={() => {
            this.setState({
              age: age + 1
            });
          }}
        >
          click
        </button>
      </div>
    );
  }
}

위에서 this.setState()를 사용하는 것을 볼 수 있는데,


this.state.name = 'guest'

위 예제와 같이 사용하게 되면, React에서 State가 변경되는 것을 감지하지 못해 컴포넌트 업데이트가 일어나지 않는다.

따라서 State를 변경시킬 때에는 this.setState를 사용해야만 정상적으로 컴포넌트 업데이트가 이루어진다.

다음번에는 React에서 권장하는 내용인 Function Component, 함수형 컴포넌트에 대해 알아보도록 해보겠다.

다람쥐 헌 쳇바퀴에 타고파

React 클래스 컴포넌트(Class Component)