React / 상태관리

 

리액트는 선언적 프로그래밍(무엇을 결과로 얻고자 하는지 설명하는 방식)을 할 수 있게 한다.

무엇을 화면에 표현할지 JSX문법으로 표현하면, JSX에 들어가는 데이터가 변화했을 때 데이터가 맞는 화면이 결과로 표시된다.

 

 

상태(state)

React 컴포넌트의 상태로, 동적으로 변경되어야 하는 데이터를 사용할 때 state를 사용한다.

state는 변경할 수 있는 데이터고, 상태가 변경되면 컴포넌트가 리렌더링 되기 때문에 데이터 흐름에 사용되는 값만 state에 포함되어야 한다.

 

아래는 state를 사용하지 않은 예시다.

function App() {
  let counter = 0;

  function increase() {
    counter++;
    console.log(counter);
  }

  function decrease() {
    counter--;
    console.log(counter);
  }
  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  );
}

 

버튼을 클릭하면 counter의 값이 증가하거나 감소하고 있음을 콘솔로 확인해볼 수 있지만, 화면이 변경되지 않고 있다.

값이 변경될 경우 리렌더링으로 변화한 값을 화면에 나타내게 하고 싶다면 state를 사용해야 한다.

 

 

useState()

React에서 상태 관리를 위해 사용하는 Hook 중 하나로, 기본 형식은 다음과 같다.

const [state, setState] = useState(initialState);
// state : 현재 상태 값
// setState : 상태 변경 함수
// useState() : [state, setState]형태로 반환
// initialState : 상태의 초기값

 

 

이를 사용해 위의 카운터의 변경사항이 화면에 렌더링되도록 수정할 수 있다.

 

function App() {
  const [counter, setCounter] = useState(0)

  function increase() {
    setCounter(counter+1);
  }

  function decrease() {
    setCounter(counter-1);
  }
  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  );
}

 

또는 최신 상태를 더 안전하게 사용할 수 있도록 함수를 전달해서 상태를 변경할 수도 있다.

 

함수의 전달 인자로 이전 상태값인 prev를 넣어주고, return값으로 prev+1을 해주면 이게 다음 상태값이 된다. 

여러번 연속 업데이트할 때에는 이 방법이 더 안전하다.

 

function App() {
  const [counter, setCounter] = useState(0)

  function increase() {
    setCounter((prev)=>prev+1);
  }

  function decrease() {
    setCounter((prev)=>prev-1);
  }
  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  );
}

 

 

---

 

+ 클래스형 컴포넌트로 상태관리하기

요새는 보통 함수형을 쓰고 있긴 하지만 알아두는 편이 좋다

 

class App extends Component {
  state = { counter: 0 };

  render() {
    return (
      <>
        <div>counter {this.state.counter}</div>
        <button
          onClick={() => this.setState({ counter: this.state.counter + 1 })}>
          +
        </button>
        <button
          onClick={() => this.setState({ counter: this.state.counter - 1 })}>
          -
        </button>
      </>
    );
  }
}

 

 

또는 아까 함수에서 prev 파라미터를 썼던 것 처럼 메서드 내에서 다음과 같이 구현할 수 있다.

 

class App extends Component {
  // 상태를 객체 형태로 직접 정의, counter는 상태 변수
  state = { counter: 0 };
  // this의 바인딩 문제로 인해 클래스 내부에서 일반적인 함수 선언은 불가능함 -> 화살표 함수로 this를 자동 바인딩
  // 파라미터인 prevState로 이전 상태 안전하게 반영
  increase = () => {
    // this.setState()로 상태 변경
    this.setState((prevState) => ({
      counter: prevState.counter + 1,
    }));
  };

  decrease = () => {
    this.setState((prevState) => ({
      counter: prevState.counter - 1,
    }));
  };
  render() {
    return (
      <>
        <div>counter {this.state.counter}</div>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease}>-</button>
      </>
    );
  }
}