useState

1. 소개

• useState는 React에서 제공하는 hook으로 컴포넌트의 상태를 생성하고 업데이트한다.

useState – React

2. 사용법

import { useState } from 'react';

function ExampleComponent() {
   const [count, setCount] = useState(0);
   
   return (
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
         증가
      </button>
   );
);

• 사용법은 간단하다 배열로 선언해 주고 첫 번째 인자로 값을 읽고 두 번째 인자로 값을 업데이트한다.

3. Principles for structuring state 

• 상태를 사용할 때 어떻게 상태를 선언해야할지 고민이 될 때는 React에서 추천하는 방법을 따르는 것도 좋은 방법이다.

1. 항상 두 개 이상의 상태 변수를 동시에 업데이트하는 경우 단일 상태 변수로 병합하는 것을 고려하라.
2. 상태가 여러 개의 상태가 서로 모순되고 불일치할 수 있는 방식으로 구성되면 실수의 여지를 남기니 이것을 피하려고 노력하라.
3. 렌더링 중에 컴포넌트의 props 또는 기존 상태 변수에서 일부 정보를 계산할 수 있는 경우 해당 컴포넌트의 상태에 해당 정보를 입력하지 않아야 한다.
4. 동일한 데이터가 여러 상태 변수 간에 중복되거나 중첩된 개체 내에서 중복되면 동기화를 유지하기가 어려우니 중복을 줄일 수 있을 때는 중복을 줄인다.
5. 깊은 계층적 상태는 업데이트하기에 매우 편리하지 않으니 가능하면 평평한 방식으로 상태를 구조화하는 것을 선호하라.

Choosing the State Structure – React