Session 13 . How to update UI (state, event)

*🔐Study Keyword :

1>🔑Stete와 🔑event를 사용해서 UI를 업데이트 해보고 2>💻Props로 state와 event handler를 넘겨보좌.

1. State

• state란 화면에 보여지는 것의 핵심정보로서 결국 UI는 render(state)이다.
• 이는 화면에 보여지는 UI는 모두 state로부터 그려지고 오직 state에 의해서만 화면이 변한다는 것을 의미합니다.

• state의 단어 뜻인 상태, 즉 의미 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미합니다.

• 즉, state는 화면에 보여줄 컴포넌트의 UI정보를 지니고 있는 "객체"이다.

1_1. State 객체

• 중요한 건 State 역시 props와 마찬가지로 객체라는 점이다.

<script>
    this.state = {
      color: 'red',
      fontSize: '40px'
    };
</script>

• 객체 내부의 key(color)와 key의 value(red)가 한 쌍으로 들어간다.

1_2. state 설정순서

• 클래스형 컴포넌트에선 render 함수가 필수이며 render함수 안에 화면에 보여지고자 하는 JSX요소가 return문 안에 들어간다.

1> constructor 함수 내부에 super()를 호출하고 props를 파라미터로 전달해준다.
2> 이후 this.state 값에 초기값(컴포넌트의 초기 상태 값)을 먼저 세팅해주면 이후 3>render 함수가 실행된다.
4> state의 값을 변경하기 위해서는 this.setState()를 통해 변경해야하며,
5> 이를 통해 컴포넌트의 상태가 변경이 되면 render 함수가 리렌더링, 재실행 된다.

1_3. State 사용 예시

• state에서 상태값을 설정하는 이유는 컴포넌트 내부 요소에서 상태값을 반영하여 데이터가 변경될 때마다 효과적으로 화면(UI)에 나타나도록 만들기 위해서이다.
• 이는 앞서 살펴본 UI = render(state) 공식과 동일하다.

• 해당 state를 활용하여 JSX 요소에 인라인 스타일을 적용하기 위해선 다음과 같이 접근할 수 있다.

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

• dot notation을 이용하여 객체의 특정 key 값에 접근하여 특정 key 값을 color 속성의 value로 지정해 줄 수 있다.
• 이를 통해 state 상태 값을 설정하면 컴포넌트 내부의 요소(h1)에서 상태값을 반영하여 UI에 나타나지도록 할 수 있다.

<script>
  <h1 style={{ color: this.state.color, fontSize: this.state.fontSize }}>
   Class Component | State
  </h1>
// this : 해당 컴포넌트를 가리킨다.
// this.state : 해당 컴포넌트의 state 객체를 의미한다.
// this.state.color : state 객체의 특정 key 값이다.
</script>

2. Event & setState

<script>
setState(updater, [callback])
</script>

• setState 함수를 통해 state 상태 값을 변경할 수 있다.

• setState 함수는 2개의 인자를 받는데
  1> 첫 번째 updater에는 객체가 들어가거나 함수형태가 들어갈 수 있다.
  2> 두번째는 callback 인자에는 콜백함수가 들어갈 수 있다.

<script>
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;</script>
</script>

• 1> button 요소에 onClick 이벤트 발생시에 현재 컴포넌트(state)의 handleColor 함수가 실행된다.
• 2> handleColor 함수 실행되면 setState 함수 실행되어 이를 통해 state의 color 값을 'blue' 로 변경해준다.
• 3> state 값이 바뀌면 render 함수가 다시 호출되어 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경된다.

✨필수✨) state에 따라 변하는 유동적 className 지정하기

• 인라인 요소에 스타일을 지정하여 변경하는 식의 코드는 유지보수에 좋지않다ㅜ😣

• 따라서 state에 따라 className을 변경하여 style을 바꾸어주도록 구현하는 것이 좋다.

<script>
import React, { Component } from 'react';
class State extends Component {
  constructor() {
    super();
    this.state = {
      isChangecolor: false,
    };
  }
  handleColor = () => {
    this.setState({
      isChangecolor: !this.state.isChangecolor,
    })
  }
  render() {
    return (
      <div>
        <h1 className={isChangecolor ? "red" : "normal "}>
          Class Component | State
        </h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}
export default State
</script>

---

3. Props로 state와 event handler 넘기기

• props(properties, 속성)는 단어 의미 그대로 컴포넌트의 속성값으로
• props란 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체를 의미한다.

• props는 부모의 state를 자식에게 넘겨주는 형태이다. 이렇게 부모의 상태를 자식에게 넘겨주는 형태는 리액트에서 자주 쓰이는 패턴이다.

<script>
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>
       // 자식 컴포넌트의 props 설정 후 부모 컴포넌트가 state를 넘겨주고 있다.
        <Child titleColor={this.state.color}/>
      </div>
    );
  }
}
export default Parent;
</script>

<script>
import React from 'react';
// 자식 컴포넌트
class Child extends React.Component {
  render() {
         // 넘겨받은 state를 자식 컴포넌트에서 찍어본다.
		console.log("이값은뭘까?", this.props.titleColor);
        // 부모의 state 값인 'red'가 짜잔!
    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}
export default Child;
</script>

• 자식 컴포넌트는 부모로부터 받은 데이터로부터 화면을 달라지게 해준다.
• 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 데이터는 state가 될 수 있고 함수가 될 수 있어 그 함수가 event handler일 수 도 있다.
• props는 실제로 state로부터 오고 있다.
• props 명과 event handler로 넘겨줄 함수 명을 똑같은 걸로 지어주는 것이 일반적인 컨벤션이다.

자식 컴포넌트가 부모의 컴포넌트의 state를 변경하는 법

• 1>부모가 자식에게 부모의 state를 변화시키는 event handler 함수를 props로 넘겨준다면, 2>자식은 그 함수를 실행하여 부모의 state를 변화시킬 수 있다!

<script>
import React from 'react';
import Child from '../pages/Children/Children';
class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }
  changeColor = () => {
    this.setState({
      color: 'blue'
    })
  }
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
				<Child titleColor={this.state.color} changeColor={this.changeColor}/>
      </div>
    );
  }
}
export default State;
</script>

• 자식의 프로퍼티의 값으로 이벤트 함수를 넘겨주고
• 자식이 가지고 있는 props가 바뀌면 렌더가 바뀌기 때문에 자식 부분도 렌더된다.

• 부모 컴포넌트에서 props 객체를 통해 state 데이터 뿐만 아니라 부모에서 정의한 event handler 함수도 넘겨준다.
• props의 changeColor 값으로 Parent 함수에서 정의한 handleColor 함수 자체를 넘겨주고 있다.
• <Child /> 컴포넌트에서 어떻게 props로 전달받은 handleColor 함수를 활용하는지 살펴보겠습니다.

• state는 단방향으로 흘러간다

• 따라서 자식 컴포넌트에서 셋스테이트로 스테이트를 변경한다는 건 자식컴포넌트 자체가 가진 스테이트를 업그레이드하는 것이지 부모로부터 받아온 것을 업데이트하지 못한다.

*💡conclusion

• state와 event를 활용하여 UI가 변경되는 과정을 이해해보고 UI = render(state) 공식의 의미를 곱씹어보자!

# 📑Study Source

• 위코드 장현님의 포인트 강의 중 :]