useContext
useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React Hook이다.
const value = useContext(SomeContext)🍪 컴포넌트의 최상위 레벨에서 사용해야 한다.
🍪 context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.
🍪 useContext를 사용하면 현재 컴포넌트에서 context 값을 반환히며. 컴포넌트는 context가 변경될 때 해당 context를 사용하는 자식 컴포넌트를 자동으로 리렌더링한다.
🍪 useContext() 호출은 항상 해당 컴포넌트 위에 있는 가장 가까운 provider에서 값을 찾으므로, 해당 <Context.Provider>는 useContext() 호출을 수행하는 컴포넌트의 위에 있어야 한다.
이를 통해 상위에서 context 값을 가져오거나 defaultValue를 가져오거나 할 수 있다.
🍪 context를 통해 전달된 데이터 업데이트하기
- context를 업데이트하려면 state와 결합해야 한다. Provider에 변경된 state 값을 전달하면 된다.
- state가 아닌 reducer로도 결합 가능하다.
🍪 context를 통해 객체와 함수를 포함한 모든 값을 전달할 수 있다.
🍪 useContext로 가져온 값은 렌더링마다 새로운 객체가 되고 변경된 context 값을 사용하는 모든 하위 컴포넌트도 리렌더링하게 되는데 따라서 리렌더링을 최적화를 위해 useCallback으로 래핑하거나 객체 생성을 useMemo로 래핑한다.
➕ useState, useReducer, useContext 차이 요약 (중간 정리)
useState는 로컬 상태를 관리하는 데 사용되며,useReducer는 복잡한 상태 관리와 업데이트 로직을 분리하는 데 사용된다.useContext는 전역 상태를 공유하기 위해 사용된다.- 각각의 간단한 예시)
useState는count라는 상태 변수와 이를 업데이트하는setCount함수를 제공한다. 버튼을 클릭하면count가 증가하고 렌더링이 업데이트된다.useReducer를 사용하여 상태 변수count를 관리한다.reducer함수를 사용하여 상태 업데이트 로직을 분리하고, 버튼을 클릭하면dispatch를 통해increment액션을 디스패치합한다.useContext를 사용하여ThemeButton컴포넌트에서 테마를 읽는다.ThemeContext.Provider로 테마 값을 제공하고 버튼의 스타일을 테마에 따라 변경한다.
useRef
useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅이다.
const ref = useRef(initialValue)🍪 initialValue: ref 객체의 current 프로퍼티 초기 설정값, 초기 렌더링 이후부터는 무시되는 값
🍪 컴포넌트의 최상위 레벨에서 호출하여 ref 객체를 선언합니다. 이렇게 선언한 ref 객체는 특정 요소를 가리키거나 다른 데이터를 참조할 때 사용된다.
🍪 useRef는 ref 객체를 반환하며, 이 ref 객체는 current라는 단일 프로퍼티를 가진다. current 프로퍼티의 초기값은 initialValue로 설정된다.
🍪 ref.current 프로퍼티는 일반 state와 달리 직접적으로 변경 가능하다. React는 ref.current의 변화를 감지하지 않으므로 이 값을 직접 업데이트할 때 리렌더링이 발생하지 않는다.
🍪 ref 내부 작동 방식
function useRef(initialValue){
const [ref, unused] = useState({ current, initialValue});
return ref;
} // 리렌더링 촉발X
// 로컬로 저장 (컴포넌트에 저장되는 건 X)🍪 useRef는 초기값으로 설정된 initialValue로 current 프로퍼티를 가진 ref 객체를 반환합니다. useRef의 주요 용도는 렌더링 중에는 ref.current를 읽거나 변경하지 않는 것입니다.
🍪 렌더링 중에 어떤 값을 읽거나 쓰려면 useRef가 아닌 상태(state)를 사용해야 한다. Ref는 주로 렌더링과 무관한 작업에서 사용된다.
❓ ref를 쓰는 경우와 state를 쓰는 경우 차이
💡"ref"는 DOM 요소나 다른 컴포넌트에 직접 액세스하고 조작할 때 사용되며, "state"는 컴포넌트의 내부 데이터 상태를 관리하고 상태 변경에 따라 UI를 업데이트할 때 사용된다.
🍪 useRef로 input 요소 등을 참조하고, 필요한 경우 forwardRef를 사용하여 해당 ref를 부모 컴포넌트로 노출시킬 수 있다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소나 메소드를 직접 제어할 수 있다.
➕ useState, useReducer, useContext, useRef 차이 (중간 정리)
useState훅은 함수형 컴포넌트에서 상태(state)를 관리할 때 사용, 주로 컴포넌트의 내부 데이터를 저장하고 업데이트하는 데 활용useReducer훅은 상태 관리를 위해 사용되며, 특히 복잡한 상태 논리를 다룰 때 유용. 리듀서 함수와 초기 상태를 사용하여 컴포넌트의 상태를 업데이트하며,dispatch함수를 통해 상태를 변경useContext훅은 React 컨텍스트를 활용하여 컴포넌트 트리 전체에서 상태를 공유하고 접근할 때 사용, 주로 상태나 설정, 로그인 정보와 같이 여러 컴포넌트에서 공유되어야 하는 데이터를 전달하는 데 사용useRef훅은 DOM 요소를 참조하거나 함수 컴포넌트 내에서 변수를 유지할 때 사용, 주로 DOM 조작, 애니메이션, 이전 값을 유지하는 데 사용된다. 상태 업데이트에 영향을 주지 않고 데이터를 저장하려고 할 때 유용
