TIL045 React State & Props

Somi·2021년 6월 29일

React

목록 보기

6/11

리액트 컴포넌트에서 다루는 데이터는 두가지, props와 state!

- props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값
  (위에서 아래로만 물려줄 수 있고, 받아온 props는 직접 수정할 수 없다!)  
- state는 컴포넌트 내부에서 선언되며, 내부에서 값 변경 가능! 은닉된 정보!

1. Props

1) props의 정의

props = properties
단어 뜻대로 컴포넌트의 속성값!
props는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다.

2) 컴포넌트에서의 props

아래 코드를 보면 부모 컴포넌트에 존재하는 state값을 this.state를 통해 자식 컴포넌트로 속성값으로 넘겨줬다.

// Parent.js

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

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

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

export default State;

3) props 객체

// Child.js

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;

state와 마찬가지로 props는 객체이다!
render함수에서 this.props를 console로 확인해보면 데이터가 key-value형태로 담겨있는 것을 확인할 수 있다!

<h1 style={{color : this.props.titleColor}}>Child Component</h1>

// this : 해당 컴포넌트
// this.props : 해당 컴포넌트의 props 객체
// this.props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

4) Props와 Event

// Parent.js

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

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

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

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

export default State;

props를 통해서 state 값 뿐만 아니라 event handler함수도 넘겨줄 수 있다.
이렇게 넘겨받은 event handler 함수는 자식 컴포넌트에서 아래와 같이 사용한다.

// Child.js

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;

위 코드는 아래와 같은 순서로 실행된다.
1. onClick 이벤트 발생시 this.props.changeColor를 통해 부모 컴포넌트로부터 전달받은 handleColor함수 실행
2. handleColor함수 실행시 setState함수 호출 -> 색상 값 변경
3. render()함수 호출
4. <Child /> 컴포넌트에 변경된 state데이터 전달
5. this.props.titleColor로 색상을 지정하는 h1타이틀 색상 변경

2. State

1) State 정의

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
state는 화면에 보여줄 컴포넌트의 ui정보를 지니고 있는 객체

2) State 사용법

import React from 'react';

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

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

여기서 constructor는 class 내에서 객체를 생성화하고 초기화 하기 위한 메서드이다! state값을 초기화 하거나, 메서드를 바인딩할때 사용된다.
파생클래스에서 'this'를 사용하기 위해서는 반드시 super()를 호출해야한다. 그렇지 않을 경우 참조에러가 발생한다.
클래스형 컴포넌트 안에는 필수적으로 render함수가 필요하고, 화면에 나타내고 싶은 jsx요소가 return문 안에 들어있다.
그리고 나서 this.state값에 컴포넌트의 초기 상태값을 설정해주었다.

3) state 객체

 this.state = {
      color: 'red'
 };

컴포넌트의 state는 객체이다.
객체 안의 key는 원하는대로 설정할 수 있다.

state에서 상태값을 설정하는 이유는 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 UI에 나타내기 위함이다!!!!

4) State & Event

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

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

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

export default State;