[React] useRef, useState, useReducer, useContext 사용례 비교

요약

• useRef 렌더링 X 변수 설정 필요한 경우 [컴포넌트]
• useState 렌더링 O 단순한 데이터 타입 [컴포넌트]
• useReducer 렌더링 O 복잡한 데이터 타입 (예: object), 복잡한 operation [컴포넌트]
• useContext 여러 컴포넌트에 걸쳐 공유하는 데이터, 함수 [Provider 하위]

useRef

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화되는 변수
• 렌더링 필요없는 경우

사용례

• 비디오 element 조작

 

useState

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
• 렌더링 필요한 경우
• 간단한 데이터 타입 (예: string, number, boolean 등)

사용례

• 간단한 계산기

 

useReducer

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
• 렌더링 필요한 경우
• 복잡한 데이터 타입 (예: object 등)
• 데이터를 다루는 다양한 operation 필요한 경우

사용례

• fetch 데이터

 

useContext

언제?

• 여러 컴포넌트에 걸쳐 사용되며 한번 초기화 되는 변수

사용례

• 테마 설정
• 로그인 정보