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 조작, 애니메이션, 이전 값을 유지하는 데 사용된다. 상태 업데이트에 영향을 주지 않고 데이터를 저장하려고 할 때 유용

---

출처 https://react-ko.dev/reference/react