React useState

[ 상태 관리 ]

 

 useState()는 컴포넌트에서 바뀌는 값을 관리하는 함수입니다. 

 

 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부르는데, 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요합니다. 

 

 React Hooks이 나오기 전까지는 클래스 기반의 컴포넌트를 사용하여 상태값을 관리할 수 있었지만, 클래스 기반의 컴포넌트는 유지 보수가 힘들다는 단점이 있습니다. 

 

 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었는데요!

 

 이때 사용하는 함수가 useState() 함수입니다. 

 

[ useState ]

 

 useState()는 상태의 초기값을 인수로 전달 받아 호출됩니다. 

 

 이때의 반환값은 상태를 나타내는 배열로, 배열의 첫 번째 요소는 현재 상태 값, 두 번째 요소는 상태 값을 갱신해주는 Setter 함수 입니다. 

 

 즉 초기에는 상태값이 초기값으로 들어가 있고, 이 상태값을 바꾸고 싶다면 상태 함수(새롭게 바뀔 값)를 이용해서 변경할 수 있습니다. 

 

import { useState } from 'react';

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

// 또는

const 상태 = useState(상태 초기 값);
const 상태값 = 상태[0];
const 갱신함수 = 상태[1];

 

 

참고 링크 : https://iridescent-zeal.tistory.com/213