[TIL #20 WECODE] React State & props

210310 WECODE #20 State & props

1. State 객체

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      key: "value"
    };
  }

  render() {
    return (
      <div>
       화면에 나타내고 싶은 JSX 요소
      </div>
    );
  }
}

export default State;

• state를 설정할 때는 화면에 보이듯이 constructor 함수를 작성하여 설정합니다.
• this.state 값에 "컴포넌트의 초기 상태값"을 설정

2. Props(속성)

• 컴포넌트의 속성값

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

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

• 자식 컴포넌트의 props 로 titleColor 속성을 생성!

• titleColor의 값으로 this.state.color, 즉 부모 컴포넌트의 state 객체 중 color 값을 전달

• 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다!

• render 함수와 return 함수 사이에서 this.props 값을 console.log로 확인해보자

• 결과 확인 시 props 객체 안에 부모로부터 전달받은 데이터가 {key:value} 형태로 담겨 있는 것을 확인할 수 있다.

  1. <button> 요소에서 onClick 이벤트 발생

  2. 이벤트 발생 시 this.props.changeColor 실행

  3. props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 handleColor 함수 실행

  4. handleColor 함수 실행 시 setState 함수 호출

  5. state의 color 값을 'blue' 로 변경

  6. render 함수 호출

  7. <Child /> 컴포넌트에 변경된 state 데이터(this.state.color) 전달

  8. this.props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경