[React] React.js 강좌 2. 클래스형 Props & State 정리

클래스형 Props & State 정리

 

 

1. 개념

React에서 자주 사용되는 Props와 State의 개념과 차이점입니다.

 

Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다.

위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다.

 

State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다.

 

 

 

 

2. 기초

세 단계의 걸친 예를 보겠습니다.

 

1) render() 메서드에서 state를 사용합니다.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

 

2) 초기 this.state를 지정하는 class constructor, 생성자를 추가합니다

class Clock extends React.Component {
  // 이때 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다.
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

 

3) 마지막으로 ReactDOM.render()에서 컴포넌트를 호출합니다.

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

 

 

 

 

3. 다른 컴포넌트에 값을 전달할 때

App.js

/***** App.js (클래스형 컴포넌트) *****/

import React, { Component } from 'react'
import MyComponent from './components/MyComponent';

export default class App extends Component {
  state = {
    value: "프롭스!!!"
  }

  render() {
    return (
      <div>
        <p><MyComponent value="Props!!!" /></p>
        <p><MyComponent value={this.state.value} /></p>
      </div>
    )
  }
}

 

MyComponent.jsx

/***** ./components/MyComponent.jsx (클래스형 컴포넌트) *****/

import React, { Component } from 'react'

export default class MyComponent extends Component {
  render() {
    return this.props.value;
  }
}

 

위 예제에 App.js에서 MyComponent를 호출할 때 this.state.value를 인자로 전달하는 것을 확인해볼 수 있습니다.

App의 state변수에서 value를 “프롭스!!!”로 정의했으므로 출력 결과는

 

Props!!!

프롭스!!!

 

가 나오게 됩니다!

 

 

 

4. 활용

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  setCount = () => {
count: this.count + 1;
  };

  render() {
    const { count } = this.state;
    return (
      <button onClick={this.setCount}>{count}</button>
    );
  }

 

위 코드를 작성하고 실행을 시켜보면 버튼 객체가 활성화가 되어 있는데, App에서는 버튼을 누르면 props.a의 값이 변경되게 끔 코딩을 해놓았습니다.

하지만 실제로 코드를 실행시키고 버튼을 동작시키면 View에서의 변화는 일어나지 않습니다.

이는 실제로는 변화되었지만, Render가 되지 않았던 것 뿐입니다.

여기서 State란? Component가 갖는 유동적인 데이터로 객체 형태로 존재합니다.

만약 state를 사용해서 View의 값을 실시간으로 바꾸려면 setState({…})을 사용합니다.

위의 코드의 function을 아래와 같이 변경해줍니다.

 

setCount = () => {
this.setState({ count: this.state.count + 1 });
  }

  

그리고 코드를 다시 실행해보면 버튼을 동작시킬 때 View의 변화도 일어나게 됩니다.

즉, setState()는 비동기적으로 함수를 호출하고, setState()가 호출되면 render()가 호출됩니다. State, 즉 지금 상태가 변경되었으니 페이지를 다시 렌더링해라! 라고 리엑트에게 알려주는 것이죠.

 

위 코드는 class 기반으로 생성된 코드이고, 조금 더 간결한 코드를 위해 리액트 훅을 활용한다면 useState함수를 사용해서 아래와 같이 사용할 수 있습니다.

 

import React, { useState } from "react";

function App() {
  //변수와 변수를 설정해주는함수
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setCount(count + 1)}>{count}</button>
      </header>
    </div>
  );
}

export default App;