[React] # 3 State & Props

simoniful·2021년 7월 5일

React

목록 보기

3/13

State

정의

상태란 뜻의 명사로 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 상태값을 의미합니다.
화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체
컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있습니다

객체로서 state

화면에 보여줄 컴포넌트의 상태를 가진 객체는 key 이름은 원하는대로 설정할 수 있습니다.
state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함 입니다.

class 형과 함수형의 차이

클래스형 컴포넌트

constructor() 메서드에서 state의 초기값을 생성
constructor를 작성할 때 super(props)를 반드시 호출하여 전역 객체 승계
this.setState 함수를 통해서 state를 변경
state는 constructor 밖으로 빼서 state = { } 와 같이 선언가능
state 기능 및 라이프사이클 기능을 사용할 수 있으며, 임의 메서드를 정의 가능
render 함수를 통하여 렌더링을 진행하며 jsx를 리턴

함수형 컴포넌트

메모리 자원을 덜 사용한다는 장점
리액트 훅이 도입하면서 state와 라이프 사이클 API를 사용하게 되며 범용성 확대

일반적인 방식 / 화살표 함수 방식 선언 사용 - 실행 컨텍스트의 차이

일반적인 방식

function BlackDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!

화살표 함수 방식(ES6)

function WhiteDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!

차이점

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리며 상대적으로 복잡한 로직을 가지고 있습니다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 합니다. 이를 Hooks를 사용하여 보완합니다.

Props

정의

props : properties(속성), 단어 뜻 그대로 컴포넌트의 속성값입니다.
props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다.
props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다.

객체로서 props

부모 컴포넌트로부터 전달 받은 데이터 및 event handler를 객체로서 활용합니다. 따라서 자식 컴포넌트에서 데이터와 이벤트를 핸들링하여 변화하는 값에 대한 처리를 할 수 있습니다.

// 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;

// 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>
        // this : 해당 컴포넌트
	// this.props : 해당 컴포넌트의 props 객체
	// this.props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"
      </div>
    );
  }
}

export default State;