ReactJS - `useContext` 사용법: 초보자 가이드

안녕하세요, React 개발자 지망생 여러분! 오늘 우리는 React의 가장 강력한 기능之一的 useContext 훅에 대해 깊이 다룰 거예요. 친절한 이웃 컴퓨터 선생님이자 저는 이 개념을 단계별로 안내해드릴게요. 프로그래밍에 처음 도전하는 분이라면 걱정하지 마세요 - 기본부터 차근차근 설명해드릴게요!

ReactJS - Using useContext

React에서 Context란?

useContext에 돌입하기 전에, 먼저 React에서 Context가 무엇인지 이해해보겠습니다. 큰 가족 저녁 식사를 준비하는 것을 생각해보세요. 특별한 소스가 테이블을 돌아다니게 해야 합니다. 사람마다 소스를 전달하는 것(React에서는 prop drilling과 같은 개념)보다 테이블 중앙에 소스를 두고 모두가 손이 닿을 수 있게 하는 것이 더 쉬운 일이 아닐까요? React에서 Context는 이와 같은 역할을 합니다 - 컴포넌트 트리를 통해 데이터를 전달할 때 매 단계마다 props를 전달할 필요 없이 데이터를 전달할 수 있게 해줍니다.

useContext 이해하기

이제 useContext는 우리의 기능형 컴포넌트에서 이 Context를 쉽게 소비할 수 있게 해주는 훅입니다. 저녁 식사 테이블에서 각 사람이 특별한 소스에 직접 접근할 수 있도록 하는 것과 같은 개념입니다.

useContext 시그니처

먼저 useContext를 어떻게 사용하는지 살펴보겠습니다:

const value = useContext(MyContext)

이 각 부분의 의미는 다음과 같습니다:

value: 현재 Context 값
MyContext: Context 객체 (React.createContext로 생성됨)

이렇게 간단합니다! 하지만 더 자세히 설명하기 위해 실제 예제를 통해 설명해보겠습니다.

훅을 통한 Context 사용

간단한 테마 스위чер를 우리 앱에 만들어보겠습니다. Context를 사용하여 현재 테마를 저장하고 useContext를 사용하여 컴포넌트에서 이를 접근합니다.

먼저 Context를 생성해보겠습니다:

// ThemeContext.js
import React from 'react';

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

export default ThemeContext;

이제 이 Context를 사용하는 컴포넌트를 만들어보겠습니다:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
I'm a {theme} themed button!
</button>
);
}

export default ThemedButton;

이 예제에서 useContext(ThemeContext)는 현재 테마 값을 가져줍니다. 그런 다음 이 값을 사용하여 버튼의 스타일을 지정합니다.

이제 이 Context를 우리 앱에서 어떻게 제공할 수 있는지 살펴보겠습니다:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

여기서 우리는 앱을 ThemeContext.Provider로 감싸고 value를 "dark"으로 설정합니다. 이렇게 하면 이 Провайд러 내의 모든 컴포넌트가 useContext를 통해 테마 값을 접근할 수 있습니다.

Context 업데이트

그런데 사용자가 테마를 전환하고 싶다면 어떻게 할까요? Context 값을 업데이트할 수 있습니다. App 컴포넌트를 수정해보겠습니다:

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

이제 우리는 상태를 사용하여 테마를 관리하고, 테마를 전환할 수 있는 버튼을 추가했습니다. 테마가 변경될 때, useContext(ThemeContext)를 사용하는 모든 컴포넌트는 자동으로 새로운 값으로 렌더링됩니다.

결론

그렇게 하면 끝입니다! 우리는 React에서 useContext의 기본 사항을 다루었습니다. 주요 포인트를 요약해보겠습니다:

Context는 prop drilling 없이 컴포넌트 트리를 통해 데이터를 전달하는 방법을 제공합니다.
useContext는 기능형 컴포넌트에서 Context를 쉽게 소비할 수 있게 해주는 훅입니다.
useContext를 사용하기 위해서는 먼저 React.createContext를 사용하여 Context를 생성해야 합니다.
Context를 업데이트하려면 Провайд러 컴포넌트의 value 속성을 변경합니다.

Context는 강력하지만, 항상 최고의 솔루션은 아닙니다. 간단한 props가 몇 단계만 전달되는 경우에는 일반 prop 전달이 더 명확할 수 있습니다. Context는 가족 저녁 식사의 특별한 소스처럼, 널리 공유해야 할 때 사용하되 과도하게 사용하지 마세요!

이 가이드가 useContext를 이해하는 데 도움이 되길 바랍니다. 계속 연습하고, 곧 React Context 마스터가 될 거예요! 행복하게 코딩하세요!

방법	설명
`React.createContext`	Context 객체 생성
`useContext`	Context 값을 소비하는 훅
`<Context.Provider>`	자식 컴포넌트에 Context 값을 제공하는 컴포넌트

Credits: Image by storyset

이전 튜토리얼:

ReactJS - useEffect 사용

다음 튜토리얼:

ReactJS - useRef 사용

ReactJS - useContext 사용법: 초보자 가이드