5. React useContext, useRef, useLayoutEffect, useRuducer

5-1 개요

전 시간까지 가장 보편적이고 많이 쓰이는 Hook을 알아보았습니다. 이제는 그 외에 Hook함수들을 공부하면서 React Hook을 마무리 짓는 시간을 갖겠습니다.

5-2 useContext()

컴포넌트 외부 어딘가에 존재하는 context 객체(React.reactContext)를 받아 그 context의 현재 상태(state)를 변환한다.

💡

context : App이나 객체의 현재 상태를 나타내주는 역할

context의 상태는 useContext Hook을 호출하는 컴포넌트를 감싸고 있는 Provider의 value prop에 의해 결정된다.

const value = useContext(MyContext);

컴포넌트에서 가장 가까운 Provider가 갱신(렌더링)되면 useContext Hook은 MyContext provider에게 전달된 가장 최신의 context를 사용하여 렌더링한다.

→ useContext로 전달한 인자는 context 객체여야한다.

→ useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 될 것이다.

useContext와 Provider 예시

const themes = {
	light: {
		foreground : '#000000',
		backgroud : '#eeeeee',
	},
	dark: {
		foreground: '#ffffff',
		background: '#222222',
	}
}

const ThemeContext = React.createContext(themes.light);

function App() {
	return (
		<ThemeContext.Provider value={themes.dark}>
			<Toolbar />
		</ThemeContext.Provider>
	);
}

function Toolbar(props) {
	const { context } = props;
	const theme = useContext(context);
	return (
		<div>
			<button style={{background: theme.background, color: theme.foreground }}>
				I am styled by theme context
			</button>
		</div>
	);
}
 

→ React Context 객체에서 관리하는 themes 값을 Toolbar라는 컴포넌트에서 직접사용하기 위해 Toolbar 컴포넌트를 <ThemeContext.Provider>로 감싼 후, value라는 props로 Toolbar에 전달

props로 받은 context를 useContext로 전달하면, 해당 컴포넌트에서 context 사용가능

→ 위의 코드에서는 Context에 단순히 값만 저장하고 있지만, State와 State 갱신 함수를 선언하여 전역 State를 관리할 수 있다.

---

5-3 useRef()

useRef() 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다. React에서 수정하려는 대상이 값이 아니라 컴포넌트나 DOM element인 경우 사용하는데 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 렌더링 되지 않는다. 또한 React 컴포넌트가 다시 렌더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않는다.

클래스형 컴포넌트에서는 콜백함수를 사용하거나 React.reactRef라는 함수를 사용하는데, 함수형 컴포넌트에서 ref를 사용할 때에는 useRef()라는 Hook 함수를 사용한다.

자주 사용하는 용도

• setTimeOut, setInterval을 통해서 만들어진 고유 ID

• 외부 라이브러리를 사용하여 생성된 인스턴스

• scroll 위치

---

5-4 useLayoutEffect()

useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 렌더링 된 후 실행되지만 useLayoutEffect는 화면의 리사이징을 감지하는 Effect이다.

• useEffect → 화면이 완전히 바뀌고 난 후 발생

• useLayoutEffect → 화면이 바뀌기 전 발생

---

5-5 useReducer()

컴포넌트의 상태 관리를 위해서 setState() Hook을 사용한다.

좀더 복잡한 상태관리가 필요한 컴포넌트에서는 setReducer() 함수를 사용한다.

Redux 패턴

기본적인 useReducer() hook 함수

const [ <상태객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>);

reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수이다. 그리고 dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데 인자로 reducer 함수에 넘길 행동(action) 객체를 받는다. 행동(action) 객체는 어떤 부류의 행동인지를 나타내는 type 속성과 해당 행동과 관련된 데이터를 담고있다.

→ 컴포넌트에서 dispatch함수에 행동(action)을 던지면 reducer 함수가 이 행동(action)에 따라서 상태(state)를 변경해준다.

Example

useReducer() Hook함수를 이용해서 현재 카운트 값과 2개 버튼을 보여주는 간단한 컴포넌트 작성

CounterComponent

→ 현재 카운트 값은 상태(state) 객체로 부터 읽어오고, 카운트 값 변경을 위해서는 각 버튼이 클릭되었을 때 dispatch 함수를 호출하도록 설정했다. dispatch 함수의 인자로 type 속성에는 어떤 변경인지에 따라 increment 또는 decrement가 넘어가고 step 속성에는 변경할 크기를 넘기고 있다.

reducer 함수

useReducer() hook함수는 첫번째 인자로넘어오는 reducer 함수를 통해 컴토넌트의 상태(state)가 행동(action)에 따라 어떻게 변해야하는지를 정의한다.

→ increment 타입의 행동에서는 step만큼 증가하여 새로운 상태 반환

→ decrement 타입의 행동에서는 step만큼 감소하여 새로운 상태 반환

복잡한 상태 관리

위 reducer 함수에 case를 추가하여 더 복잡한 reducer 함수생성

→ 행동의 종류가 늘어나더라도 그에 따라 카운트 값이 어떻게 변하는지 reducer 함수 안에 정리 가능

Uploaded by Notion2Tistory v1.1.0