TIL | props / state

state

컴포넌트 내부에 들어있는 컴포넌트의 상태값

화면에 보여줄 컴포넌트의 UI정보를 지니고 있는 객체
유저 상호작용으로 변화하는 것들이 state 객체 안에 저장된다.

class Parent extends React.Component{
  constructor(){
    super();
    this.state ={  //this 는 현재 컴포넌트를 말한다
      color:"red",
    }

문법성을 위해 구조 분해 할당을 사용할 수 있다.

state event

함수 생성 후 this.setState({}) == 이 class의 스테이트 상태를 변경하겠다.

props

컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 가지고 있는 객체다.
state의 상태값과 event handler를 inherit 할 수 있다.
자식 컴포넌트가 부모로부터 정보를 전달 받을 수 있다.

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 컴포넌트를 import 후 h1 태그 아래에 위치
        //부모 state 데이터를 props를 활용해 컴포넌트에 넘긴다.
        <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>
        //titleColor 값으로 this.state.color(부모 컴포넌트 state 객체 중 color 값을 전달
     	//button 요소에서 onClick 이벤트 발생 > this.props.changeColor 실행 > 
        //props 객체의 change 컬러(부모 컴포넌트로부터 전달받은 handleColor) 실행 >
        //handleColor 함수를 실행하면 setState 함수 호출 > state color 값을 'blue'로 변경
        //render 함수 호출
        //자식 컴포넌트에 변경된 state 데이터 전달
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
				<button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;

Author And Source

이 문제에 관하여(TIL | props / state), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yooniverse/TIL-props-state

---

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)