React(24) 리액트 훅 useState란

Updated 2023/02/23

 

React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다.

 

내가 이해한 상태값?

사용자가 웹에서 뭔가 클릭도하고 입력도 하고 이것저것 하면서 일어나는 모든 동작이 상태라고 뭉뚱그려 이해를 하였다.

웹이랑 사용자랑 데이터로 핑퐁하는 와중에 당연히 값을 데이터에 넣어서 보내겠지. 그게 상태값인 것 같다.

 

useState

- useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다.

 

- 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러번 사용해야 한다.

 

1. import 해오기

import React, { useState } from 'react';

 

 

2. useState 선언하기

const [count, setCount] = useState(0);

 

- const[count, setCount]

useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.

 

- count 는 state 값을 의미  

 

- setCount

count값을 업데이트하는 함수. 클래스 컴포넌트에서의 this.setState는 이전 state와 새로운 state를 합치지만 얘는 이전값을 덮어쓴다.

 

- useState(0) 

숫자 0은 초기값을 의미. useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한 번 사용된다.

 

 

3. setCount 사용해서 상태값 변경하기

여기서 setCount는 비동기로 처리가 된다. 비동기는 응답과 상관없이 다음 동작을 처리하는 방식이다.

비동기로 처리되는 이유는 이 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능이슈가 생길 수 있어서 그렇다.

function Example() { 

const [count, setCount] = useState(0); 		// "count"라는 새로운 상태 값을 정의하겠습니다. 땅땅땅

return (
    <div> 
        <p> You clicked {count} times</p>  	//상태값은 {count} 대괄호 안에 넣어서 쓰자.  
        <button onClick={() =>            	// onClick 이벤트 함수를 정의해주자
            setCount(count + 1)        		// 위에서 count 초기값이 0 이니까 0 + 1 은 1 ! 
        }> Click me </button>              	// setCount 함수 내용으로 count 상태값이 바뀐다.(update)
    </div> ); 
}

.

.

.

.

 

그로부터 2년 뒤, 초심을 잃지 않기 위해 새발자는 업그레이드된 beta 공식문서를 보면서 다시 한번 useState 를 복기해보았다.

React(94) useState 알아보기 (공식문서정리)