React useState에 대해 자세히 알아보기

이번에 금정이와 React-TS 프로젝트를 진행하면서 React Hooks에 대해 더 깊이 알아볼 필요성을 느꼈습니다.

이전에도 React Hook에 대한 포스팅을 했지만, 각 훅이 무엇이고, 어떻게 동작하는지 깊이 있게 다루지는 않았던 것 같습니다.

 

이번 기회에 React Hooks를 하나씩 좀 더 깊이 공부하면서 정리하는 포스팅을 연재해 볼 예정입니다.

 

 

🤓 useState란 무엇인가 ??

useState는 React 훅 중 하나입니다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해 주고, 함수형 컴포넌트는 단순히 입력을 받아

출력을 반환하는 함수라 상태라는 것을 갖지 않습니다. 그렇지만 useState를 사용하면 함수형 컴포넌트에도 상태라는 것을 

추가할 수 있습니다.

여기서 함수형 컴포넌트가 무엇인지 잘 모르는 분들을 위해 함수형 컴포넌트에 대해서도 설명드릴 건데요.

 

😎 함수형 컴포넌트란?

React에서 UI를 정의하는 가장 기본적인 컴포넌트 유형 중 하나입니다. 

이 컴포넌트는 자바스크립트 함수로 정의가 되며, props를 받아 JSX를 반환합니다.

이 JSX는 React가 화면에 그릴 요소들을 정의하는 데 사용됩니다.

function introduce(props) {
	return <h1>Hello My name is {props.name}~!!</h1>;
}

 

여기서 introduce는 함수형 컴포넌트입니다.

이 컴포넌트는 name이라는 것을 예를 들어서 의진이란 데이터를 props로 받으면 Hello My name is 의진~!!이라는 문장을 반환합니다. React는 이 리턴된 JSX를 해석하여 DOM 요소로 변환한 후 화면에 렌더링 합니다.

 

🥸 함수형 컴포넌트의 특징

가장 큰 특징은 순수 함수 pure function 이라고도 하는데 이처럼 동작한다는 것입니다.

주어진 props에 따라 항상 동일하게 출력을 반환하고, 컴포넌트 자체에 내부 상태 부수 효과가 없다는 가정이 포함됩니다.

이 이유로 함수형 컴포넌트는 초기에 상태를 가질 수 없었고, 상태를 관리하거나, 컴포넌트 생명주기에 따라 작업을 수행하려면 
클래스형 컴포넌트를 사용해야 했습니다.

하지만 함수형 컴포넌트가 상태를 가질 수 없다는 제약은 훅이 도입되면서 변경이 되었고, useState, useEffect와 같은 훅을 사용하여 
함수형 컴포넌트에서도 상태를 관리하고, 부수 효과를 처리할 수 있게 되었습니다.!!

 

👍🏻 useState 사용법

const [name, setName] = useState('');

 

state : 현재 상태의 값이다. 예를 들어, 이름을 나타내는 상태라면, name은 현재 이름이다.

setName(setState) : 상태를 업데이트하는 함수이다. 이 함수를 호출하면 상태가 변경되고, React가 Ui를 다시 리렌더링 한다.

useState() 안에 있는 값은 상태의 초기값이다. 이름을 비어있는 상태를 초기값을 두면 위처럼 설정하면 된다.

 

⚙️ useState의 동작 원리 

useState는 컴포넌트가 렌더링 될 때, 리액트의 내부 메모리에 상태를 저장합니다.
컴포넌트가 처음 렌더링될 때. useState는 초기 상태 값을 받아 내부적으로 관리하고, 이 상태 값은
컴포넌트가 다시 렌더링 되더라도 유지가 됩니다.

 

만약 상태를 업데이트하는 setName과 같은 setState 함수를 호출하게 되면, 리액트는 해당 컴포넌트를

리렌더링 하여 화면을 업데이트 합니다. 이 시점에 새로운 상태 값이 적용된 컴포넌트가 렌더링하여 최신 상태를
반영합니다. 리액트는 가상의 DOM을 사용하여 변경된 부분만 업데이트하기 때문에 성능적으로 효율적입니다.

 

또 한 가지 지식을 얻었던 부분이 있는데, useState 내부에는 JS의 클로저 개념이 적용되어 있어,
함수형 컴포넌트가 매번 호출될 때마다 상태가 유지가 되고, React의 가상 DOM과 결합하여 상태가 변경될 때마다
효율적으로 UI를 업데이트할 수 있다고 합니다.

* Closure : 함수가 생성될 때 함수 내부에서 참조하는 변수를 함수가 생성된 환경에서 기억하는 특성

 

🐶 useState를 사용할 때 고려사항

📌 복잡한 상태 관리

useState는 간단한 상태를 관리하기에는 좋지만. 상태가 복잡해지면 여러 개의 useState를 사용해야 할 수 있습니다.

이 경우 코드가 복잡해지고 가독성이 떨어질 수 있습니다. 복잡한 상태관리가 필요할 때는 useReducer를 
이용하는 게 적절할 수 있습니다.

 

📌 상태 업데이트는 비동기성이다.

 

동기(Synchronous)

• 코드가 위에서 아래로 순차적으로 실행됨

• 하나의 작업이 끝나야 다음 작업이 실행됨

비동기(Asynchronous)

• 특정 작업이 끝나기를 기다리지 않고, 다음 코드가 실행됨

• 시간이 걸리는 작업(예: 네트워크 요청, 파일 읽기, 타이머)에서 사용됨

 

useState의 상태를 업데이트할 수 있는 함수는 setState는 비동기적으로 동작합니다.

상태가 업데이트된 그 값을 참조하려면 주의해야 합니다.

 

지금까지는 개별 컴포넌트 내부에서의 상태 관리(useState)에 대해서만 이야기했습니다.

하지만 여러 컴포넌트 간 상태를 공유하거나 대규모 애플리케이션에서 상태를 효과적으로 관리해야 할 때는 다른 방법이 필요합니다.

 

📌 상태 관리 방법 선택 가이드

 

1. 간단한 상태 관리 → useState

• 한 개의 컴포넌트 내부에서만 사용되는 상태

• 예: 버튼 클릭 시 UI 변경, 입력 필드 값 관리

2. 여러 컴포넌트 간 상태 공유 → useContext + useReducer

• 부모 → 자식 컴포넌트 간 상태 전달 (props로 넘기기 어려운 경우)

• 예: 다크 모드 설정, 사용자 인증 정보 (로그인 상태)

3. 대규모 애플리케이션 상태 관리 → Redux, Recoil, Zustand, Jotai 등

• 전역 상태 관리 필요할 때

• 예: 장바구니, 사용자 정보, 테마 설정 등 여러 곳에서 동시에 필요한 상태