4월1일 - [React] useState, useRef, redux의 state 비교

개요

useState, useRef, redux의 state에 대해 정리해보자

 

비교

	useState	useRef	redux의 state
사용 방법	컴포넌트 내부에서 사용	컴포넌트 내부에서 사용	전역적으로 사용
값을 업데이트 할 때	리렌더링 발생	리렌더링 발생하지 않음	상태를 업데이트하면 즉시 반영
영향 범위	해당 컴포넌트와 자식 컴포넌트	해당 컴포넌트 내부	여러 컴포넌트 간 공유
주로 사용되는 경우	컴포넌트 내부의 로컬 상태 관리	DOM 요소에 대한 접근 및 값 보관	전역 상태 관리 및 상태 업데이트

 

프로젝트에서 각각 어떻게 사용되었나도 알아보자

useState

• input value 값
• 모임 목록

useRef

• page
• 검색 키워드
• 데이터들의 필터 값 (모임 목록에 대해 '내가 참여한 모임', '내가 만든 모임'을 구분할 때)

redux의 state

• 로그인된 사용자의 유저 정보
• 모임 하나의 데이터