useState Hook

useState란?
기존의 클래스 컴포넌트보다 간결하고 명확한 문법을 가지는 함수형 컴포넌트에서 상태변수를 추가할수 있게 해주는 hook이다.

상태변수: 프로그램이나 애플리케이션의 현재 상태를 나타내는 변수다. React에서의 상태변수는 주로 컴포넌트의 상태를 나타낸다.

 

useState 왜 사용해야 할까?

React의 함수형 컴포넌트에서 useState는 핵심 hook이라고 볼수 있다. 왜 핵심일까? 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 즉 여러가지 상태변수를 간단하게 정의하고 업데이트하는데 사용된다.

useState 구문

• const [state, setState] = useState(initValue)
  • initValue: 컴포넌트가 처음 마운트될때 사용되는 초기값
  • state: 렌더링 간에 데이터를 유지하는 상태변수
  • setState: 상태 변수를 업데이트하고 React에게 컴포넌트를 다시 렌더링하도록 알리는 역할을 하는 상태 설정 함수

useState의 동작방식

• 마운트(mount): 컴포넌트가 최초로 화면에 나타날때 useState는 초기값을 설정하고, 처음으로 렌더링될 때 한 번만 실행된다.
• 업데이트(Update):  상태변수를 업데이트할때, 해당 컴포넌트는 리렌더링이 발생한다.

useState 사용법

- 기본사용법: Counter

import React,{useState} from 'react';

export default function App() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>count {count}</p>
      <button onClick={()=>setCount(prev => prev + 1)}>+</button>
      <button onClick={()=>setCount(prev => prev - 1)}>-</button>
    </div>
  );
}

 

- 오브젝트의 사용법: Input
(https://stackblitz.com/edit/stackblitz-starters-vwrgiw?file=src%2FApp.tsx)

 

- 최상위 레벨 호출: useState 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

import {useState} from "react";

export default App(){
	return(...);
}

- 배열 구조 분해: 배열 구조 분해를 사용하여 [state, setState]형태로 사용하며, 상태업데이트 함수는 접두사 set으로 시작하여 camelCase를 사용한다

import {useState} from "react";

export default App(){
	const [state,setState] = useState("");
	return(...);
}

- 호출의 위치: useState를 호출할떄는 조건문이나 반복문안에서 hook을 호출할 수 없다.

import {useState} from "react";

export default App(){
	if(...){ const [state,setState] = useState("")};
	return(...);
}

 

- Custom Hook: 자체 Hook에서 호출하여 사용할 수 있으며 Custrom의 함수명 앞에는 use접두사가 붙어야한다.

(https://stackblitz.com/edit/stackblitz-starters-g9jfji?file=src%2FApp.tsx)

 

 

useState의 주의할점

- 초기상태값: useState는 초기 상태값을 인자로 받아와서 상태 변수를 생성하고, 다음 렌더링에서는 이를 무시한다.

- 상태 변수 갱신: setState 함수는 다음 렌더링에 대한 상태 변수만 업데이트 한다.

- 이전 상태 기반 업데이트: setState 함수는 이전 상태를 기반으로 상태를 업데이트 한다.

(setState 함수는 state가 제공한 새로운 값이 현재값과 동일하면 다시 렌더링 하는것을 건너 뛴다.)

- 비동기 동작: setState는 비동기로 동작하며, 비동기함수가 아니다. 이로써 업데이트가 즉시 반영되지 않을수 있다.

- 일괄처리 및 렌더링 사이클: setState가 여러개 호출되었을때 하나의 단일 업데이트로 묶어서 처리하여 해당 업데이트를 다음 렌더링 사이클에서 반영한다. (React는 모든 이벤트 핸들러가 실행되고, 상태 업데이트를 일괄 처리한다)

- 부모-자식 연결: 부모컴포넌트의 state가 변경되면 자식컴포넌트도 리렌더링이 발생한다.

- 컴포넌트간 독립성: 하나의 컴포넌트에서 정의된 useState는 동일한 컴포넌트를 두번 렌더링하여도 완전히 격리된 상태다.

- 불변성: 상태의 객체를 수정해야할 때에는 직접 수정하는것이 아닌 새로운 객체를 만들어 새로운 객체에 변화를 주고 상태로 적용시켜야한다.(불변성을 지키지않으면 React는 상태값이 바뀌었는지 알지못해 리렌더링이 발생하지 않는다.)

 

useState의 참고문서

useState – React

---

JS를 이용한 useState 개념

완벽한 useState를 구현하는 내용은 아니지만, 상태변수 갱신, 비동기 동작, 일괄처리 및 렌더링 사이클, 컴포넌트간의 독립성 등 useState의 구조를 이해하는데 도움이되는 코드였다. (과정에 대한 순서는 코드 하단부분 주석으로 기재하였다.)
(https://stackblitz.com/edit/web-platform-gdjrs7?file=script.js)

Vanilla Javascript로 React UseState Hook 만들기 | 개발자 황준일

---

setState의 비동기 개념 및 일괄처리에 대한 렌더링 사이클

useState가 왜 비동기적으로 동작하고, 이는 왜 일괄처리 렌더링과 관련이있는지 알수 있다.
(과정에 대한 순서는 코드 하단부분 주석으로 기재하였다.)
(https://stackblitz.com/edit/stackblitz-starters-3lwj2w?file=src%2FApp.tsx)

state 변경함수 사용할 때 주의점 : async - 코딩애플 온라인 강좌