useState 와 useContext 차이점 및 context를 사용해야 하는 이유

결론

자주 바뀌는 것, 적은 범위 = useState

기본적인 상태값(전역) = useContext

useContext를 사용하면 Provider 하위에 있는 모든 것들이 리렌더링하기 때문에 

자주 바뀌는 사항은 useState로 바꾸세용

1. useState와 useContext의 근본 차이

useState

• 컴포넌트 내부에서만 관리되는 로컬 상태.
• 그 컴포넌트 안에서만 쓰는 값이라면 useState가 딱 맞아.
• 상태 변경되면 해당 컴포넌트만 리렌더링.

즉, “내가 갖고 있는 내 개인 state” 느낌.

---

useContext

• 전역(혹은 광역) 상태 공유용.
• 여러 컴포넌트가 같은 값을 필요로 할 때 사용.
• Provider로 감싸진 모든 자식이 해당 상태를 공유하고 읽을 수 있음.

즉, “공용 창고: 누구나 꺼내서 쓸 수 있는 state” 느낌.

---

2. 왜 useState만 쓰면 안 되고 useContext가 필요한가?

이유 1: state를 많은 컴포넌트에 전달해야 할 때 “props drilling” 발생

예시)

 

App → A → B → C → D

여기서 D만 필요한 값인데,
useState로 App에서 관리하면
A → B → C → D…
중간 컴포넌트가 쓰지도 않는 값이 props로 계속 전달됨.

이렇게 되는 걸 props drilling이라고 해.

→ 코드가 길어지고, 수정하기 어려워지고, 유지보수성 떨어짐.

 useContext를 쓰면?

중간 컴포넌트 거치지 않고 D가 바로 state에 접근 가능해짐.

---

이유 2: 여러 컴포넌트에서 동일한 state를 써야 할 때

예를 들어,

• 로그인 정보
• 유저 정보
• 테마(light/dark)
• 언어 설정
• 장바구니 정보
• 인증 토큰

이런 것들은 앱 곳곳에서 사용됨.

useState로 개별적으로 관리하면?

• 컴포넌트마다 같은 state를 만들고
• 변경하면 서로 안 맞아서
• 동기화 문제 발생함.

useContext는 하나만 만들어두면

어디서든 동일한 상태를 읽고 쓸 수 있어.

---

이유 3: 규모가 커질수록 useState만으로는 구조가 망가지기 때문

초기엔 useState만으로도 충분해.
근데 프로젝트가 커지면:

• 화면마다 상태 필요하고
• 상태 공유 범위가 넓어지고
• props 넘기기 복잡해지고

→ 자연스럽게 전역 상태 관리의 필요성이 커짐.

useContext는 그 “전역 관리”의 가장 기본적인 도구야.

---

3. 정리: 언제 무엇을 써야 하는가?

useState만 써도 되는 경우

• 컴포넌트 안에서만 쓰는 값
  (버튼 눌렀는지, input 값, modal 열림/닫힘 등)
• 다른 컴포넌트에서 필요 없다면 무조건 useState로 충분함.

---

useContext를 사용해야 하는 경우

• 여러 컴포넌트에서 같은 데이터가 필요할 때
• props drilling이 생기기 시작할 때
• 전역 데이터가 필요할 때
• 사용자 인증, 테마, 설정값, 언어 등 앱 전체 공통 상태일 때

---

예시

useState만 쓰다가 터지는 구조

 

App → Header → Navbar ↳ LogoutButton

"사용자 이름"을 LogoutButton에서 보여주고 싶다면?
App → Header → Navbar → LogoutButton으로 계속 props 넘겨야 함.

useContext로는?

Header, Navbar, LogoutButton 어디서든
UserContext에서 바로 꺼내 쓰면 끝.

---

핵심 요약

 

비교	useState	useContext
관리 범위	컴포넌트 내부	앱 전역/여러 컴포넌트
목적	간단한 로컬 상태	상태 공유, props drilling 제거
리렌더	해당 컴포넌트만	Provider를 구독한 컴포넌트
쓰임새	폼, 토글	로그인, 테마, 장바구니 등