[React] useState를 공부해보자

 

🎠useState의 이론과 예시를 공부한다.

---

1. useState의 정의

컴포넌트에 state변수를 추가할 수 있는 React Hook

const [ state, useState ] = useState(initialState)

 

2. useState 사용법

1. 컴포넌트에 state 추가하기

 - 컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수 선언

import { useState } from 'react';

function MyComponent() {
  const [ age, setAge ] = useState(42);
  const [ name, setName ] = useState('Taylor');

- useState는 두 개 항목이 있는 배열을 반환한다.

•   첫 번째 항목 : 현재 state로, 처음에는 초기에 제공한 state로 설정된다.
•   두 번째 항목 : set함수로, 상호작용에 반응하여 다른 값으로 변경할 수 있다.

2. 이전 state를 기반으로 state 업데이트 하기

  1. state를 업데이트 하기 위해서 set 함수를 호출한다.

function handleClick() {
  setName('Robin');

 

2. 다음 state를 저장하고 새로운 값으로 컴포넌트를 다시 렌더링한 후 UI를 업데이트 한다.

 😡set 함수를 호출해도 이미 실행 중인 코드의 현재 state는 변경되지 않는다.

function handleClick() {
  setName('Robin');
  console.log(name); // 아직 'Tayor'이다

 

3. 실행 중인 코드에서 업데이트된 변수를 반영하기 위해서는 set함수에 state변수 대신 업데이트 함수를 전달해야 한다.

import [ useState ] from 'react';

const [ age, setAge ] = useState(42);
function handleClick() {
  setAge(a => a + 1); 	//setAge(42 => 43)
  setAge(a => a + 1);	//setAge(43 => 44)
  setAge(a => a + 1);	//setAge(44 => 45)

 a => a + 1 은 업데이트 함수다. 이 함수는 대기 중인 state를 가져와서 다음 state를 계산한다.

 

3. 객체 및 배열 state 업데이트 하기

- state에는 객체와 배열도 넣을 수 있는데 React에서 state는 읽기 전용으로 간주되므로 기존 객체를 변경하지 않고 교체해야 한다.

- state를 이용해서 직접 변경하지 않아야 한다.

// 다음과 같이 변경X
form.firstName = 'Taylor';

// 새로운 객체로 state를 교체
setForm({
  ...form,
  firstName: 'Taylor'
});

 

3. state를  업데이트 했는데 로그에 이전 값이 표시될 때

- state를 업데이트하면 새로운 state값으로 재렌더링을 요청하지만 이미 실행 중인 이벤트 핸들러에는 영향을 미치지 않다.

- 다음 state를 확인해야 할 때는 set 함수에 전달하기 전에 변수에 저장할 수 있다.

const nextCount = count + 1;
setCount(nextCount);

console.log(count);    	// 0
console.log(nextCount);	//1

 

4. state를 업데이트해도 화면이 바뀌지 않는다.

- React는 Object.js로 비교한 뒤 다음 state가 이전 state와 같으면 업데이트를 무시한다. 객체나 배열 state를 변경하는 대신 교체해야 한다.

// 잘못된 방법
obj.x = 10;
setObj(obj);

// 올바른 방법
setObj({
  ...obj,
  x: 10
});

---

🌸 useState는 변수와 그 변수에 값을 부여하는 함수로만 알고 있었다. 프로젝트를 할 때 useState로 바꾼 값이 바로 변수에 적용이 안돼 애먹었는데 그런 문제점이 있었다니... 공식문서를 꼼꼼히 읽어야겠다.