React 상탯값, 속성값

에듀캐스트 장고&리액트 강의를 듣고 정리하는 글이다.

상탯값 (state)

• UI (엘리먼트)로의 반영을 위해, 유지해야할 값들의 묶음
• 각 컴포넌트 내에서만 사용되는 값들은 컴포넌트 안에서 생성/갱신 -> 리액트 기본으로 동작 여러 컴포넌트에서 사용되는 값들은 별도 공간에서 생성/갱신 -> Redux, Context API, MobX등을 활용하면 편리하다.
• 컴포넌트에서 상탯값에 대한 getter/setter 함수를 제공해준다. (성능 저하의 원인이 될 수 있으니 상탯값을 직접 변경하지 말자!)

import React from 'react';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.state.counter += 1; // 이렇게 쓰지 말자. 모든 상탯값/속성값은 불변값으로 처리되어야 한다.

    const counter = this.state.counter + 1;
    this.setState({ counter });
  }

  render(){
    const { counter } = this.state;
    return (
      <p onClick={this.onClick}>
        Counter : {counter}
      </p>
    )
  }
}

클래스형 컴포넌트에서는 this.state 객체를 통해 상탯값 접근(getter)과 this.setState 함수를 통해 상탯값을 변경(setter)해준다.

setState

ReactComponent.setState(
  객체 또는 함수,
  처리가 끝났을 때 호출되는 콜백 함수
)

비동기로 동작 변경할 특정 state값들이 담긴 object를 지정하거나, 함수를 지정 가능 -> 매개변수를 호출되기 직전 상태값을 받는다. (추천)

• setter에 지정된 함수에서 상탯값을 직접 참조하고 있지 않아도, “직전 상탯값”을 인자로 전달받기에 유용하다.
• immer 라이브러리랑 같이 쓰기 좋다.

// 2씩 증가할거 같지만, 비동기 동작이기에 count 값은 1만 증가한다.
onClick1 = () => {
  this.setState({count: this.state.count + 1})
  this.setState({count: this.state.count + 1})
}

// 직전 상태값을 받아와 처리
onClick2 = () => {
  this.setState(prevState => ({count: prevState.count + 1}));
  this.setState(prevState => ({count: prevState.count + 1}));
}

속성

컴포넌트 생성 시에 넘겨지는 값의 목록

• 읽기 전용으로 취급하고, 변경하지 않는다.
• 자식 컴포넌트 입장에서는 데이터/함수를 전달받는 유일한 통로(Context API 사용하면 새로운 통로를 이용할 수 있다.)
• 부모 컴포넌트의 데이터/함수를 자식 컴포넌트에 넘겨준다.
• 컴포넌 HOC(High Order Components) 기법을 통해, Redus의 값이나 함수를 넘겨 받기도 한다.

값 지정 시에 중괄호를 통해 다양한 타입의 값 및 표현식 지정 가능

• 중괄호를 빼면, 문자열 타입의 값만 지정 가능하다. ```javascript

```