[React] State 개념

개발새발🦶·2022년 9월 29일

React 메가바이트스쿨

React

목록 보기

2/5

✅ State

✨ State는 컴포넌트에서 다루는 데이터 중 하나이다. Props와 비교되기도 하는데, State는 컴포넌트 내부에서 선언하며, 변경이 가능한 동적인 데이터이다.

this.state - 클래스 기반 상태 관리

React Hooks가 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 컴포넌트를 작성해야 했는데, 클래스 기반 컴포넌트는 함수 기반 컴포넌트에 비해 복잡하고, 오류가 발생하기 쉽고 유지 보수가 힘들기 때문에 불편한 의견이 많았다.

1. React Hooks - useState

React Hooks에서 제공하는 useState는 State를 간편하게 생성하고 업데이트 시킬수 있게 해주는 도구를 제공한다. 원하는 곳에 useState('보관할 자료') 쓰면 state에 자료를 저장할 수 있다.

useState를 사용하기 위해서는 useState를 import한다.

import { useState } from 'react';

function App() {
  let [like, likeChange] = useState(0);

  return (
    <div className='App'>
      <div className='list'>
        <span onClick={() => { likeChange(like + 1) }}>👍</span>{like}
      </div>
    </div>// app
  );
}

likeChange는 상태 값 갱신 함수에 부합하는데, onclick이벤트에서 likeChange(like + 1) 상태 값을 변경하도록 만들어 클릭시 계속 +1이 된다.

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

array, object State

array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다 기존값은 보존해주는 코드를 짜는 것이 좋다. 유동적인 데이터 이기 때문에 기존의 데이터가 필요할 경우 낭패를 보기 때문이다.

때문에 새로운 변수를 선언하여 기존의 데이터를 가져오는 방식으로 코드를 짠다.

import { useState } from 'react';

function App() {
  let [listName, listChange] = useState(['안녕', '하세요', '헬로']);

  return (
    <div className='App'>
      <div className='list'>
        <h4>
          {listName[0]}
          <button onClick={() => {
            let copy = [...listName];
            copy[0] = '하이';
            listChange(copy);
          }}>클릭</button>
          <button onClick={() => {
            let sortList = [...listName];
            sortList.sort();
            listChange(sortList);
          }}>가나다 정렬</button>
        </h4>
        <p>1111</p>
      </div>
      <div className='list'>
        <h4>{listName[1]}</h4>
        <p>2222</p>
      </div>
      <div className='list'>
        <h4>{listName[2]}</h4>
        <p>3333</p>
      </div>
    </div>// app
  );