TIL_41_with Wecode 031 React

state?
뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값.
화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체.

예시) class형 컴퍼넌트에서 state를 정의

import React from 'react';
class State extends React.Component {
  constructor() {
  super();
  this.state = {
    color: 'red'
 };
} 
  render() {
    return (
      <div>
        <h1>Class Component State</h1>
      </div>
     )
  }
}
export default State;

클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소가 return 문 안에 들어가있다.
render 함수 위의 constructor 함수는 state를 설정할 때 작성해줘야 하는 함수이다. 그리고 constructor 메소드 안에는 super()를 호출해야 한다.

예시) state 객체

this.state = {
  color: 'red'
 }; 

컴퍼넌트의 state는 객체다.
그래서, 객체 안의 key 이름은 원하는대로 설정할 수 있다.
위의 코드에서 알 수 있듯이 color key의 값으로 “red” 를 value로 지정하였다.

state 사용 예시
state에서 상태값을 설정하는 이유는 컴퍼넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면에 나타내기 위함이다!

import React, {Component } from 'react';
class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }
  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>
          Class component State </h1>
        </div>
      );
  }
}
export default State;

h1의 글자색을 위에서 설정한 state 값으로 설정해주고 싶은 경우,
dot notation 을 사용하여 객체의 특정 키 값에 접근하여 그 값을 color 속성의 value로 지정해준 것이다.
// this : 해당 컴포넌트
// this.state : 해당 컴포넌트의 state 객체
// this.state.color : state 객체의 특정 key(color)값. 즉 "red"

또 하나, jsx 코드 사이에 자바스크립트 코드를 사용하고 싶다면, { } 로 감싸줘야 한다.
위의 코드를 보면 <h1 style={{ color: this.state.color }}> 중괄호에 두 번 감싸져 있다.
이유는, 자바스크립트 문법을 사용하기 위해 {} 한번,
거기에 스타일 속성명과 값을 적으려면 객체 방식으로 써줘야하기 때문에 {} 한번 더 쓰여진 것이다.
참고 사이트
참고 사이트

Event 와 setState

import React, { Component } from 'react';
class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
  };
}
handleColor = () => {
this.setState({
  color: 'blue'
})
}
render() {
return (
  <div>
    <h1 style={{ color: this.state.color }}
        Class Component State </h1>
    <button onClick={this.handleColor}>Click</button>
  </div>  
  );
 }
}
export default State;   

• button요소가 추가되었고 버튼 요소에서 onClick이벤트가 발생.
• this.handleColor 즉 현재 컴포넌트(State)의 handleColor 함수 실행.
• handleColor 함수 실행 시 setState 함수 실행 - state의 color 값을 'blue' 로 변경
• render 함수 호출
• 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경

State.js 파일을 만들어주었다. this는 컴퍼넌트 자체를 가리키는 것. setState 안에는 우리가 바꾸고자 하는 state 객체를 넣어주면 된다.
setState는 state를 업데이트 시킬 수 있다.

새로 scss 파일을 만들어주고 색상을 지정.

Routes.js 파일에 import 해주고 경로도 지정해주었다.

클릭을 누를 때마다 글씨의 색깔이 바뀌는 것을 볼 수 있다.

온클릭 이벤트는 온클릭 안에있는 함수를 실행한 것 뿐. -> 온클릭 안에 있는 함수는 state의 값을 바꿔주는 함수. 그리고 h1은 오직 state 상태만을 바라보고 있음.