React 상탯값 (state) (feat. 클래스형 컴포넌트)

인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.

---

UI (엘리먼트)로의 반영을 위해, 유지해야할 값들의 묶음

상탯값은 어디에 저장/관리?

• 각 컴포넌트 내에서만 사용되는 값들은 컴포넌트 안에서 생성/갱신 → 리액트 기본 동작
• 여러 컴포넌트에서 사용되는 값들은 별도 공간에서 생성/갱신
  • 이때 Redux, Context API, MobX 등을 활용하면 편리

컴포넌트에서 상탯값에 대한 getter/setter 함수를 제공해줍니다.

• 상탯값을 직접 변경하지는 않음 → 성능 하락

---

클래스 컴포넌트 기본 형식

class Counter extends React.Component {
  //이 부분
  state = {
    counter: 0,
  };
  onClick = () => {
    //this.state.count += 1 (setState를 통하지 않ㄱ소 변경하려고 하면 UI에 반영안됨)
    const counter = this.state.counter + 1;
    this.setState({ counter });
  };

  render() {
    const { counter } = this.state;

    return <p onClick={this.onClick}>Counter: {counter}</p>;
  }
}

클래스 컴포넌트에서의 상탯값

1. this.state 객체를 통해 상탯값에 접근

2. this.setState 함수를 통해 상탯값을 변경

   • 인자로 객체 또는 함수

   this.setState((prevState) => {});
   

   • 비동기로 동작

   //value가 0이라고 할 때 다음과 같이 하면, 값은 3이 아니라 1이 됨
   //위 코드의 계산이 수행되기도 전에, 원본 state를 참조하기 때문에
   this.setState({value:this.state.value+1)};
   this.setState({value:this.state.value+1)};
   this.setState({value:this.state.value+1)};
   

   • 비동기지만 순서대로 하고 싶을 때
   • 함수의 인자로 들어간 prevState 역할: 가장 최근 state를 불러옴

   //value가 0이라고 할 때 다음과 같이 하면, 값은 3이 됨
   this.setState((prevState) => {
     const { value } = prevState;
     return { value: value + 1 };
   });
   this.setState((prevState) => {
     const { value } = prevState;
     return { value: value + 1 };
   });
   this.setState((prevState) => {
     const { value } = prevState;
     return { value: value + 1 };
   });
   

   setState호출은 컴포넌트가 무안트된 이우헤만 유효해서 contructor안에서의 호출은 무시됨

상탯값 어디 저장/관리

1. 컴포넌트 내부

각 컴포넌트 객체 단위로 상탯값을 유지하고, 하위 컴포넌트의 속성값으로 전달

상탯값 setter 함수를 통해 상탯값을 직접 변경 (Reducer 개념을 적용할 수도 있음)

this.setState함수, useState 훅 활용

문제점: 컴포넌트 계층이 복잡할 때, 상탯값/속성값 전파의 번거로움.

하지만 리액트 16.3에 소개된 Context API로 전파가 쉬워졍ㅆ음

2. 컴포넌트 외부에서 “전역 상태 관리”

컴포넌트 외부에 별도의 상탯값 저장소를 둠

여러 컴포넌트들에 의해 공유될 상탯값 (로그인 정보 등)을 관리함

컴포넌트에세 상탯값 setter 함수를 제공한다기보다, dispatch함수를 제공함