일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- Taillwind
- Javascript
- 피그마
- hook
- 자료구조
- grid
- git
- axios
- Babel
- useMemo
- express
- useCallback
- CSS
- HTML
- docker
- github
- FigJam
- render
- FIGMA
- EC2
- Next.js
- TypeScript
- 코딩테스트
- 해시
- 프로그래머스
- TAILWIND
- Stack
- SSR
- react
- webpack
- Today
- Total
나는 오늘도 멋있다
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의 참고문서
JS를 이용한 useState 개념
완벽한 useState를 구현하는 내용은 아니지만, 상태변수 갱신, 비동기 동작, 일괄처리 및 렌더링 사이클, 컴포넌트간의 독립성 등 useState의 구조를 이해하는데 도움이되는 코드였다. (과정에 대한 순서는 코드 하단부분 주석으로 기재하였다.)
(https://stackblitz.com/edit/web-platform-gdjrs7?file=script.js)
setState의 비동기 개념 및 일괄처리에 대한 렌더링 사이클
useState가 왜 비동기적으로 동작하고, 이는 왜 일괄처리 렌더링과 관련이있는지 알수 있다.
(과정에 대한 순서는 코드 하단부분 주석으로 기재하였다.)
(https://stackblitz.com/edit/stackblitz-starters-3lwj2w?file=src%2FApp.tsx)
'Web > ReactJS' 카테고리의 다른 글
useCallback hook (0) | 2024.01.05 |
---|---|
useMemo hook (0) | 2024.01.03 |
useRef hook (0) | 2023.12.31 |
useEffect hook (1) | 2023.12.27 |
React에 대해서 (0) | 2023.12.13 |