[React] useState 사용법 - 1

나의 첫 게시글 마크다운 문법도 처음이다.
개발 지식과 경험들을 이 블로그에 열심히 작성하기를 다짐하며
오늘은 useState를 혼내보고자 한다.

---

알아야 할 Javascript 문법

• 구조 분해 할당(디스트럭처링)
• 콜백함수

---

uesState란?

• 함수형 컴포넌트에서 state값을 사용할 수 있도록 해주는 Hooks 이다.
• 비동기로 실행되며 개별 컴포넌트 안에서 제어한다.

state란?

• 일종의 변수로 컴포넌트에서 제어하는 state가 있다면 state 값에 따라 컴포넌트가 랜더링된다.
• 주요 데이터에 따라 컴포넌트가 랜더링 되어야 할 때(유동적 데이터) 컴포넌트 내부에서 변경되는 state를 사용한다.

---

 

  useState를 사용해 state값(원시자료형)을 제어하는 방법

 

1. state를 사용할 컴포넌트에서 'react'로 부터 useState를 import한다.

		import {useState} from 'react';

 

2. 디스트럭처링(구조분해할당)으로 state 변수와 state제어 함수를 선언한다.

		// useState의 전달인자로는 state 초기값을 입력해준다.
		// ex) let [스테이트변수, 스테이트제어함수] = useState(state 초기값);
 		let [num, setNum] = useState(0);

 

3. state 제어하기

		// setNum 함수를 시행하여 num 값을 초기화할 수 있다.
		return(<>
               	// 태그 내부에 javascript 변수를 사용하기 위해서는 중괄호 안에서 값을 처리해준다.
               	<p>{num}</p>
               	// 버튼의 onClick이벤트에 setNum을 할당해 state 값을 1 늘리는 로직을 작성한다.
               	<button onClick={()=>setNum(prev=>prev++)}> +1 </button>
               </>);

 

useState의 setState(state 제어함수)에 대해

• state를 제어하는 함수로 전달인자로 값을 입력 시 입력된 값을 state에 리턴(초기화)한다.
• 콜백함수를 전달인자로 받을 수 있으며 콜백함수의 첫 번째 전달인자는 이전값 즉 바꿀 스테이트 값을 받는다.(Javascript 클로저와 관련)
  

---

 

useState의 기본 사용법과 원시 자료형 state를 제어하는 방법을 알아보았다.
다음 글은 참조 자료형 데이터를 state로 관리하는 방법을 정리하겠다.