State

: 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
다시 말해, 화면에 보여줄 컴포넌트의 정보를 지니고 있는 객체이다.

Component 내의 State

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'purple'
    };
  }
  
   handleColor = () => {
    this.setState({
      color: 'yellow'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>B3O2</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;

컴포넌트 내에 필수적으로 들어가야 하는 함수는 render 함수다.
그 render 함수 위에 constructor 함수를 만들고, 그 안에 super함수 호출과 this.state ={속성:속성값}을 작성한다.

이 때, this.state 내에 들어간 정보는 컴포넌트의 초기 상태값이다.

render 함수 내의 요소에서 상태값을 사용할 때는, 태그 내에 속성을 지정하고 자바스크립트에서 객체로 인식할 수 있도록 중괄호를 두 번 겹쳐 입력한다.

button 요소에서 onClick 이벤트가 발생하면, State 컴포넌트 내의 handleColor 함수 내의 setState()가 실행되면서, color 속성의 값이 yellow로 변경된다.

setState() 함수에는 render 함수를 호출하는 기능이 포함되어 있기 때문에,
바뀐 state 값대로 render 함수가 재실행된다.

정리

• 컴포넌트의 state는 객체다.
• 객체 내 key name은 원하는대로 설정할 수 있다.
• state에서 상태값을 설정하는 이유는, 컴포넌트 안의 요소에서 그 상태값을 반영하여
  -> 데이터가 바뀔 때마다 효율적으로 UI에 나타내기 위함이다.

Props

: properties의 축약어로 '컴포넌트의 속성값'을 이른다.

props는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체다.

이 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값과 event handler를 넘겨줄 수 있다.

부모 컴포넌트 예시

import React from 'react';
import Child from '../pages/Child/Child';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'purple'
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child titleColor={this.state.color}/>
      </div>
    );
  }
}

export default State;

• 자식 컴포넌트를 import 해온다.
• render 함수 안에서 자식 컴포넌트를 위치한다.
• state에 있는 데이터를 props를 이용해서 자식 컴포넌트에게 넘길 수 있다.
  * 자식 컴포넌트의 props로 titleColor 속성이 지정되었다.
  • titleColor 속성의 값으로 state 객체 중 color 값을 넘겨주고 있다.

자식 컴포넌트 예시

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

• render 함수 내에서 return을 시작하기 전에 console.log로 this.props를 찍어보면, 해당 데이터가 잘 전달되었는지 확인할 수 있다.
  * props는 객체이기 때문에, key: value 형태로 값이 담겨있다.

• this.props.titleColor 구문으로 속성값을 지정해서, 부모 컴포넌트로부터 전달받은 props 정보인 titleColor(부모 컴포넌트의 color 값)를 사용한다.

• this.props.titleColor에서 this는 해당 컴포넌트를 이르고, this.props는 해당 컴포넌트의 props 객체를 이르고, this.props.titleColor는 props 객체의 특정 key값(purple)을 이른다.

Props and Event

앞서 언급한 바와 같이, props를 통해 event handler도 전달할 수 있다.

예를 들어, 부모 컴포넌트에서 폰트의 색을 바꾸는 handleColor 함수가 있을 때, 코드는 다음과 같다.

import React from 'react';
import Child from '../pages/Children/Children';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'purple'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'yellow'
    })
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
				<Child titleColor={this.state.color} changeColor={this.handleColor}/>
      </div>
    );
  }
}

export default State;

• render 함수에서 자식 컴포넌트를 위치하면서, changeColor라는 속성으로 handleColor 함수를 넘기고 있다.

이를 전달받는 자식 컴포넌트는 다음과 같다.

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
				<button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;

• 자식 컴포넌트에서 button 태그 내에 onClick 요소에 changeColor event handler를 사용하고 있다.