[React] ContextHook(useContext) 정의와 사용예시

 

 

리액트의 클래스형 컴포넌트에 대해 알아보았다.
그러면서 자연스레 Hook에 대해 알게되었고,
React 코드의 대부분은 Hook으로 이뤄진 걸 알게되었다.
Hook이 무엇인지, 자세하게 알아보자.

 

 

 

 

1. React Hook의 등장 배경

• 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.
• 리액트 초기에는 함수형 컴포넌트를 사용했으나, 값의 상태를 관리(state) 혹은 생명주기(컴포넌트가 생성되고 사라지는 과정)를 사용해야할 때만 클래스형 컴포넌트를 사용했다.
• 클래스형 컴포넌트는 코드의 구성이 어렵고 재사용성이 떨어진다. 코드 최적화도 어렵고 최신 기술 사용도 효과적이지 않다.
• 그래서 이런 클래스형 컴포넌트의 단점을 보안하면서, 함수형 컴포넌트를 사용할 수 있도록 등장한 것이 바로 React Hook(리액트 훅)이다.

 

 

---

 

 

 

2. React Hook

• 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 사용되는 몇가지 기술들을 일컫는다.
• 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다.
• 주로 대표적으로 사용하는 것이 useEffect, useState 등이 있다.

 

 

 

---

 

 

 

3. ContextHook

• Context는 컴포넌트가 Props를 전달하지 않고도 멀리 있는 부모 컴포넌트로부터 정보를 받을 수 있게 해준다.
  
  
• useContext
  a) useContext는 컴포넌트에서 Context를 읽고 구독할 수 있는 React Hook이다.
  b) useContext는 어떤 데이터를 담는지에 대한 SomeContext(ThemeContext)가 필요하다. 
  c) 이때 중요한 것은 SomeContext(ThemeContext)는 정보를 담고 있지 않다. 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.
  d) 트리에서 호출하는 컴포넌트 상위의 가장 가까운 SomeContext(ThemeContext)에 전달된 값으로 결정된다. (그러니까 무조건 위에 SomeContext를 적어둬야한다. 하위에 적으면 안된다.)
  e) Context가 변경되면 React는 자동으로 해당 Context를 읽는 컴포넌트를 다시 렌더링한다.

import { createContext, useContext, useState } from 'react';

// 1.
// Context를 만들어준다.
// 여긴 테마 컨텍스트로 설정된 값을 Provider 전달한다.
const ThemeContext = createContext(null);

export default function MyApp() {
  // 2.
  // 기본값은 밝게 설정되어있다. useState로 변경을 감지하여 렌더링할 것이다.
  const [theme, setTheme] = useState('light');
  return (
    // 3.
    // 체크박스로 사용자가 설정하고 체크할 시, 이벤트 객체 e가 확인한다.
    // e.target으로 사용자가 dark를 체크했는지, light를 체크했는지 확인한다.
    // 체크박스에 표시가 생기면 true -> dark, false -> light가 된다.
    <ThemeContext value={theme}>
      <Form />
      <label>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={(e) => {
            setTheme(e.target.checked ? 'dark' : 'light')
          }}
        />
        Use dark mode
      </label>
    </ThemeContext>
  )
}

// Form은 색상 변경이 없다.
function Form({ children }) {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

// 
function Panel({ title, children }) {
  // 4.
  // 위에 어떤 레이어가 있던지 신경쓰지 않는다.
  // useContext를 사용하여 ThemeContext에 담긴 데이터를 받는다.
  // provider가 테마의 데이터를 여기서 담아준다.
  const theme = useContext(ThemeContext);
  // 여기서 className을 정해진다. 'panel-dark' 이런식으로
  const className = 'panel-' + theme;
  return (
    // 색상이 변경되어 리턴된다.
    <section className={className}>
      <h1>{title}</h1>
      // 열린 태그, 닫힌 태그 사이에 넣은 모든 걸 children이라고 한다.
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

 

 

Q. SomeContext를 비유로 적어보자면?

A. 처음엔 상자같이 정보를 담아서 준다고 이해했다. 그러나 리액트 페이지에 보면 정보를 담지 않는다고 했다. 그러면 통로같은 개념으로 이해하면 될 것 같다. 테마 색상이 바뀌면 바뀌었다는 바뀐 정보를 Provider로 전달만 하는 배관, 전깃줄 같은 역할인 듯 하다.

 

 

 

 

 

 

---

 

 

- react hooks

내장 React Hook – React

 

 

 

- useContext

useContext – React