TIL43⎟React : state, props,event

state의 개념과 props의 개념과 사용 목적을 확실히 말할 수 있을정도로 개념을 알고 있자!

1. State

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

💡 그렇다면 이렇게 컴포넌트의 state를 설정하는 이유와 무엇을 할 수 있는 것인가?

state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 리액트가 자동적으로 우리가 구현한 render 함수를 호출하며 효율적으로 화면(UI)에 나타내기 위함이다.

예시
step1. 해당 컴포넌트의 상태를 어떻게 정의하는 지에 대한 예시
this.state 값은 컴포넌트의 초기 상태값을 설정한 값

<import React, { Component } from 'react';

export class State extends Component {]
	constructor() {
      super();
   this.state = {
    titleColor: "green",
  };
 }
    //ES6+에서는
    	state = { 
  			titleColor: 'green'
  		};
만 적어주면 된다!
  	
  	render() {
  		return (
  	<div>
     	<h1>Hello Danbi!</h1>
  	</div>
  	   );
  	  }
  	}
  
  export default State;

step2. state 초기세팅이 끝났고, state를 사용해보자!

import React from 'react';

export class State extends Component {
 state = {
  titleColor: "green",
};
	
	render() {
		return (
	<div>
   	<h1 style={{ color: this.state.titleColor }}>Hello Danbi!</h1>
	</div>
	   );
	  }
	}

export default State;

return 할 곳의 요소에서 변화를 주고 싶은 해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 준 예시!
우리가 현재 component의 state에서 만든 객체에서 특정 key를 가져오는 접근으로, this.state.color로 dot notation을 사용하여 color 속성의 value 값을 정해주었다.

step3. event를 발생하여 state의 데이터를 바꿀 수 있다.
Event & setState

step2에선 우리가 step1에서 초기 상태값으로 설정해준 value를 key를 이용하여 적용시켰다. 이제 이 value값을 바꿔주는 예시를 보자!

import React, { Component } from 'react';

export class State extends Component {
 state = {
  titleColor: "green",
};

handleColor = () => {
  this.setState({
    titleColor: "orange",
  });
};

render() {
  return (
    <div>
      <h1 style={{ color: this.state.titleColor }}>Hello Danbi!</h1>
      <button onClick={this.handleColor}>Click!</button>
    </div>
  );
}
}
}

export default State;

추가한 button을 Click하면, this.handleColor(즉, 현재 컴포넌트의 handleColor 함수를 실행하겠다. handleColor 함수는 setState 함수를 실행시키는데, state의 color 값을 blue로 변경시키겠다는 뜻이다. 이렇게 바뀐 state 값을 반영하여 태그 글자의 색상을 변경하겠다.

응용 - 버튼을 클릭할 때 마다 색을 변하게 해주고 싶을 때
1. 2가지의 선택지 - booleans 이용
2. className의 동적 사용/inline 은 가장 최우선 순위로 적용되기 때문에 협업할 때 어려울 수도 있다

import React, { Component } from "react";
import "./ReactTest.scss";

class ReactTest extends Component {
  state = {
    titleColor: true,
  };

  handleColor = () => {
    this.setState({ titleColor: !this.state.titleColor });
  };

  render() {
    return (
      <div className="changeColor">
        <h1 className={this.state.titleColor ? "greenTitle" : "orangeTitle"}>
      //
          Hello Danbi!
        </h1>
        <button onClick={this.handleColor}>Click!</button>
      </div>
    );
  }
}

export default ReactTest;

누를 때 계속 false만 되기에, className이 false이므로 계속 orange만 나오게 된다. !this.state.titleColor 지금 this.state.titleColor의 반대값을 넣어주겠다.

객체 비구조화 할당을 이용해보자
변수로 지정한 것이 obj의 key값, 즉 해당 key의 value값을 return한다.

import React, { Component } from "react";
import "./ReactTest.scss";

class ReactTest extends Component {
  state = {
    titleColor: true,
  };

  handleColor = () => {
    const { titleColor } = this.state;
    this.setState({ titleColor: !titleColor });
  };

  render() {
    //객체 비구조화 할당
    const { titleColor } = this.state;

    return (
      <div className="changeColor">
        <h1 className={titleColor ? "greenTitle" : "orangeTitle"}>
          Hello Danbi!
        </h1>
        <button onClick={this.handleColor}>Click!</button>
      </div>
    );
  }
}

export default ReactTest;

2. Props

부모 컴포넌트가 있고, 자식 컴포넌트로 분리 해줄 때만 props 객체가 필요한 것! 분리하지 않으면, 바로 state 객체에 접근해서 UI를 구현하면 된다.

컴포넌트의 속성값으로, 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체
props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.

컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props은 컴포넌트 외부에서 데이터를 제공받는다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서이다. 상황에 따라 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용 되어진다.

부모 컴포넌트

export class Props extends Component {
  state = {
    childTitleColor : 'red',
    isHidden : false
  };
}

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

자식 컴포넌트

export class Child extends Component {
  render() {
    return (
      <div>
      <h2 style = {{color : this.props.titleColor}} Child title</h2>
      </div>
	);
  }
}

부모 컴포넌트 요소에 있는
을 자식 컴포넌트로 가져오길 위해, <h2 style = {{color : this.props.titleColor}} Child title 에 적용하였다. {this.state.childTitleColor}가 하나의 props가 되는 것이다!