[07-React] 6-1. React Hook :: useState

1. useState

: 함수형 컴포넌트 내부에서 상태를 정의 및 관리

: useState로 지정은 내부 변수 (= 제어 컴포넌트로, 변경 시 리렌더링O)

const [state ,setState] = useState(); // 초기값 미정의 시 undefined

: 현 상태, 세터가 제공됨

• 유의점
  - setState를 통해 값을 업데이트할 경우 비동기적 업데이트임 확인해야함
  - 리렌더링 시에 set~를 한번에 진행

const App = () => {
  const [state, setState] = useState('hello')
  return (
    <>
      <h1>{state}</h1>
      <button
        onClick={() => {
          setState('hi')
          console.log(state) // hello
        }}
      >
        update
      </button>
    </>
  )
}

- setState를 통해 값이 바로 업데이트 되는 것이 아닌 해당 ()=>{ ... } 이 끝날 때 끝나기 때문에 

- console 값은 이전 값으로 반영된다.

---

1.2 Lazy initalization

: useState의 초기 값을 특정 값이 아닌 함수로 넣어줌
: 해당 깂이 필요할 때까지 계산을 지연 -> 큰 리소스가 필요한 로직을 지연시켜 성능 최적화
: 맨 처음 렌더링 때만 계산되어짐 -> 이후는 X
: 초기 값이 복잡하거나 비싼 계산일 경우에 유리함

const [data, setData] = useState(
    Array.from({ length: 1000000 }, (_, i) => i * i)
);

// Lazy initalization
const [data, setData] = useState(() => { // 계산량이 많은 초기값
    console.log('복잡한 계산 실행 중...'); // 리렌더링 발생 시, 재실행 X
    return Array.from({ length: 1000000 }, (_, i) => i * i);  
  });

 

---

참고

asac 수업자료

모던 리액트 Deep Dive