🌝리액트_State 상태 & Props 속성

❣️State,Props

처음 state,props개념을 들었을 때는 이해가 안되서 멘붕이었지만 직접 프로젝트에 코드를 사용해보니까 점차 이해가 되고 있다~! 그래도 더 확실한 이해를 위해 개념을 정리를 해보자!

우리가 먼저 알아야할 것은 Props와 State는 데이터를 다룰 때 사용하는 개념이라는 것이다.

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

보여지기 위해 반드시 렌더 필요

import React from 'react';

class State extends React.Component {
  constructor() {
    super();//this가 state컴포넌트를 바라볼 수 있게해주는 것이 super의 역할
    this.state = {//컴포넌트의 state는 객체. color_key값, red_value값
      color: 'red'
    };
  }

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

export default State;

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

실제 사용예시

import React, { Component } from 'react';

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

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component|                    State</h1> //this는 현재 state컴포넌트를 의미하는 것. 결국 state를 통해 리턴문 안에 있는 UI를 관리
      </div>
    );
  }
}

export default State;

Event &setState

import React, { Component } from 'react';

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

  handleColor = () => {
    this.setState({
      color: 'blue'
    })// setState값 통해 state 변경해줄 수 있다.
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
// addEventListener할 필요없이 jsx안에다가 onClick통해 이벤트 정의
this(컴포넌트)안에 handleColor함수가 실행되게 해줌
      </div>
    );
  }
}

export default State;

🧐클래스형 컴포넌트 setState?
setState는 상탯값을 변경할 때 호출하는 메서드다.
seteState메서드로 입력된 객체는 기존 상탯값과 병합된다. 또한 비동기로 상탯값을 변경한다.

Props

• Props는 부모 컴포넌트로부터 물려받는 속성. 이를 통해 부모 컴포넌트와 소통할 수 있으며, 부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트가 된다.
• 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체
  (state는 컴포넌트의 상태를 지니고 있는 객체)
  부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식입장에서) 읽기 전용
• prop를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값,event handler를 넘겨줄 수 있다.

// Parent.js

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

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
			<Child titleColor={this.state.color}/>
//{this.state.color}이게 객체값으로 props에 저장이 된다.
      </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>
         /*this: 해당 컴포넌트
               this.props: 해당 컴포넌트의 props객체
               this.props.titleColor: props객체의 특정 key값*/
         <button onClick={this.props.changeColor}>Click</button>
    </div> 
    );
  }
}

export default State;