[React] 클래스 컴포넌트 (props / state)

잡담

오늘은 클래스 컴포넌트에 대해서 공부해 보도록 하겠습니다. 저번에도 언급했듯이 React는 컴포넌트 기반의 아키텍처입니다. 애플리케이션을 여러 개의 조각(컴포넌트)으로 나누어서 컴포넌트마다 자체적으로 상태와 로직을 등을 변경해 줄 수 있었습니다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 오늘은 클래스형 컴포넌트에 대해서 예제를 통해 알아보도록 하겠습니다.

---

 

1. 클래스 컴포넌트

주어진 코드는 React의 클래스 컴포넌트를 정의하는 예제입니다. 이 코드에서는 React의 Component 클래스를 상속받아 App이라는 클래스를 만들고 있습니다. 이를 통해 클래스형 컴포넌트를 생성하고, state와 props를 사용하여 애플리케이션의 상태와 속성을 관리할 수 있습니다.

import { Component } from "react";

class App extends Component { // App 클래스가 Component 클래스를 상속받는다.
  constructor(props) { // 생성자
    super(props); // 상위 클래스 생성자
    this.state = { // 상태값
      // 초기 상태 정의
    };
  }

  render() { // 화면 출력하는 메서드
    return (
      <div id="app">
        Hello React
      </div>
    );
  }
}

export default App;

porps / state값?

현재 코드에서는 App 컴포넌트의 constructor 메서드에서 props와 state를 초기화하고 있습니다. 그러나 이 코드에서는 props와 state에 아무런 값도 포함되어 있지 않습니다. 초기화된 state는 비어 있으며, props는 constructor 메서드의 매개변수로 전달되지만 사용되지 않고 있습니다.

 

각 부분의 역할

1. import { Component } from "react";
   • React 라이브러리에서 Component 클래스를 임포트합니다. 이는 클래스를 기반으로 한 컴포넌트를 생성할 때 사용됩니다.
2. class App extends Component { ... }
   • App 클래스가 Component 클래스를 상속받습니다. 이를 통해 App 클래스는 React 컴포넌트로서의 기능을 갖추게 됩니다.
3. constructor(props) { ... }
   • constructor는 클래스의 생성자 메서드입니다.
   • props는 부모 컴포넌트로부터 전달된 속성입니다.
   • super(props);는 부모 클래스인 Component의 생성자를 호출하여 props를 초기화합니다.
   • this.state = { ... };는 컴포넌트의 초기 상태를 정의합니다.
4. render() { ... }
   • render 메서드는 React 컴포넌트의 필수 메서드로, 화면에 렌더링 할 내용을 반환합니다.
   • JSX를 사용하여 컴포넌트의 UI를 정의합니다.
   • 이 예제에서는 <div id="app">Hello React </div>를 반환하여 화면에 "Hello React" 텍스트를 표시합니다.
5. export default App;
   • App 클래스를 모듈의 기본(default) 내보내기로 설정하여 다른 파일에서 임포트 할 수 있게 합니다.

 

그렇다면 Component 클래스는 어디에 있는가?

Component 클래스는 React 라이브러리에서 제공하는 클래스로, React 패키지 내부에 포함되어 있습니다. 정확히는 react 패키지의 일부로 제공되며, 일반적으로 react 패키지를 설치하고 임포트 하여 사용할 수 있습니다.

React 패키지를 설치하면 Component 클래스를 포함한 모든 React 관련 클래스와 함수를 사용할 수 있습니다. 보통 이러한 클래스들은 react 패키지 내의 node_modules 디렉터리 안에 위치합니다. 일반적으로는 개발 환경에서는 import 문을 사용하여 React의 필요한 모듈을 가져옵니다.

이렇게 가져온 Component 클래스는 클래스형 컴포넌트를 정의할 때 사용됩니다.

 

출력값

 

---

 

2. Counter Component

이 코드는 React 클래스를 이용하여 상태를 관리하고, 버튼 클릭으로 상태를 업데이트하는 간단한 카운터 컴포넌트를 구현한 것입니다.

import { Component } from "react"; // React에서 Component 클래스를 가져옵니다.

class App extends Component { // App 클래스가 Component 클래스를 상속받습니다.
  constructor(props) { // 생성자 메서드입니다.
    super(props); // 상위 클래스인 Component의 생성자를 호출합니다.
    this.state = { // 상태값을 초기화합니다.
      num: 0 // num 상태값을 0으로 초기화합니다.
    };
  }

  // 증가 메서드입니다.
  increase = () => {
    this.setState({ // setState를 사용하여 상태값을 업데이트합니다.
      num: this.state.num + 1 // num 값을 1 증가시킵니다.
    });
  }

  // 감소 메서드입니다.
  decrease = () => {
    this.setState({ // setState를 사용하여 상태값을 업데이트합니다.
      num: this.state.num - 1 // num 값을 1 감소시킵니다.
    });
  }

  render() { // 화면을 출력하는 메서드입니다.
    console.log('render'); // render 메서드가 호출될 때마다 콘솔에 'render'를 출력합니다.
    return (
      <div id="app"> {/* 루트 요소입니다. */}
        <h1>{this.state.num}</h1> {/* 현재 상태값(num)을 출력합니다. */}
        <button onClick={this.increase}>+</button> {/* 증가 버튼입니다. 클릭 시 increase 메서드를 호출합니다. */}
        <button onClick={this.decrease}>-</button> {/* 감소 버튼입니다. 클릭 시 decrease 메서드를 호출합니다. */}
      </div>
    );
  }
}

export default App; // App 컴포넌트를 모듈로 내보냅니다.

---

속성(Props):

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위해 사용하는 읽기 전용 값입니다.

 

상태(State):

• 컴포넌트의 상태는 동적으로 변할 수 있는 데이터를 저장합니다.
• 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.

 

컴포넌트가 생성될 때 호출되는 생성자 메서드입니다. props를 매개변수로 받고, 상위 클래스의 생성자에 props를 전달합니다. 초기 상태(state)를 설정하는 역할을 합니다.

constructor(props) {
  super(props);
  this.state = {
    num: 0
  };
}

 

• constructor(props): 생성자 메서드, 컴포넌트가 인스턴스화될 때 호출됩니다.
• super(props): 상위 클래스인 Component의 생성자를 호출합니다.
• this.state: 컴포넌트의 초기 상태를 정의합니다. 여기서는 num이라는 상태 변수를 0으로 초기화합니다.

 

상태값(num)을 변경하는 메서드입니다. increase는 num을 1 증가시키고, decrease는 num을 1 감소시킵니다.

increase = () => {
  this.setState({
    num: this.state.num + 1
  });
}

decrease = () => {
  this.setState({
    num: this.state.num - 1
  });
}

 

• 화살표 함수(increase = () => {... }): 클래스 메서드에서 this의 문맥을 바인딩하기 위해 사용됩니다.
• this.setState(): React 컴포넌트의 상태를 변경하는 메서드입니다. 변경된 상태값에 따라 컴포넌트가 다시 렌더링 됩니다.

 

컴포넌트의 UI를 정의하고 렌더링 합니다. 상태값(num)을 화면에 출력하고, 버튼 클릭 이벤트를 핸들링합니다.

 

render() {
  console.log('render');
  return (
    <div id="app">
      <h1>{this.state.num}</h1>
      <button onClick={this.increase}>+</button>
      <button onClick={this.decrease}>-</button>
    </div>
  );
}

• return (...): JSX를 사용하여 UI를 정의합니다. JSX는 JavaScript를 확장한 문법으로, HTML과 유사한 구조를 사용해 UI를 구성합니다.

 

See the Pen Untitled by 이현석 (@loxshqac-the-styleful) on CodePen.

 

---