[💎React] useContext

useContext의 기능

특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 특정한 값을 불러와서 사용할 수 있도록 해주는 Hook

리액트는 기본적으로 위에서부터 아래로 데이터를 전송해주는 구조로 이루어져있다. 만약 어떤 프로젝트에서 전역적으로 사용하는 데이터(user, theme, language 등)이 있다고 하자. 그럼, 최상위 App 컴포넌트에서부터 그 데이터를 사용하는 저 아래 하위 컴포넌트까지 모든 컴포넌트를 거쳐가며 전송해줘야 할 것이다. 🤬 해당 데이터가 필요없는 컴포넌트에게도 전해줘야하므로 코드도 복잡해질뿐더러, 데이터가 바뀌면 모든 컴포넌트에서 일일히 수정해줘야 한다.ㅠㅠ(props drilling)

useContext를 사용하면 아까처럼 일일히 props 를 거치지 않아도 App 컴포넌트가 "이 데이터 필요한 사람~?" 하면 해당 데이터가 필요한 컴포넌트에게만 바로 전달해줄 수 있다.

useState만 사용해서 구현한 페이지

App.jsx

function App() {
    const [isDark, setIsDark] = useState(false)
    return <Page isDark={isDark} setIsDark={setIsDark} />
}

Page.jsx

import React from 'react'

function Page({ isDark, setIsDark }) {
    return (
        <div>
            <Header isDark={isDark} />
            <Content isDark={isDark} />
            <Footer isDark={isDark} setIsDark={setIsDark} />
        </div>
    )
}

// 이 아래는 Page 컴포넌트에서 사용할 컴포넌트들
function Header({ isDark }) {
    return (
        <header style={{ background: isDark ? 'black' : 'lightgray', color: isDark ? 'white' : 'black' }}>
            <h1>홍길동님 안녕하세요</h1>
        </header>
    )
}

function Content({ isDark }) {
    return (
        <div style={{ background: isDark ? 'black' : 'white', color: isDark ? 'white' : 'black' }}>
            <p style={{}}>좋은 하루 되세요</p>
        </div>
    )
}

function Footer({ isDark, setIsDark }) {
    const toggleTheme = () => {
        setIsDark(!isDark)
    }
    return (
        <div>
            <button onClick={toggleTheme}>다크모드/라이트모드</button>{' '}
        </div>
    )
}
export default Page

여기서 Page는 isDark, setIsDark를 직접적으로 사용하지 않는다. 그저 하위 컴포넌트에게 전달만 해줄뿐. 지금은 중간 역할을 하는 컴포넌트가 Page 하나뿐이지만 프로젝트 단위가 커지면, 이런 컴포넌트가 몇 십개 될 수도 있을 것이다. 🫠 이제부터 useContext를 사용해 좀 더 간결하게 데이터를 전송해보자!

useContext 사용해 구현한 페이지

context 생성
ThemeContext.js

import { createContext } from 'react'
export const ThemeContext = createContext(null)

생성한 context.Provider를 통해서 특정한 컴포넌트를 감싸주면, value 부분에 명시한 값을 하위 컴포넌트에서 항상 사용할 수 있게 된다.
App.jsx

import { ThemeContext } from './components/context/ThemeContext'
import Page from './components/Hooks/Page'

function App() {
    const [isDark, setIsDark] = useState(false)
    return (
        <ThemeContext.Provider value={{ isDark, setIsDark }}>
            <Page />
        </ThemeContext.Provider>
    )
}

Page.jsx

import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'

function Page() {
    return (
        <div>
            <Header />
            <Content />
            <Footer />
        </div>
    )
}

//하위 컴포넌트에서는 앞서 만들어놓은 context를 불러온 후에
//useContext를 써주면 Provider의 value 부분을 통해서 넘겨준 그 값을 바로 받아올 수 있다
function Header() {
    const { isDark } = useContext(ThemeContext)
    return (
        <header style={{ background: isDark ? 'black' : 'lightgray', color: isDark ? 'white' : 'black' }}>
            <h1>홍길동님 안녕하세요</h1>
        </header>
    )
}

function Content() {
    const { isDark } = useContext(ThemeContext)

    return (
        <div style={{ background: isDark ? 'black' : 'white', color: isDark ? 'white' : 'black' }}>
            <p style={{}}>좋은 하루 되세요</p>
        </div>
    )
}

function Footer() {
    const { isDark, setIsDark } = useContext(ThemeContext)

    const toggleTheme = () => {
        setIsDark(!isDark)
    }
    return (
        <div>
            <button onClick={toggleTheme}>다크모드/라이트모드</button>{' '}
        </div>
    )
}
export default Page

Page 컴포넌트 자체는 더 이상 isDark,setIsDark에 관여하지 않아도 된다. 해당 데이터를 사용할 컴포넌트들만 useContext,ThemeContext를 import해오면 된다.

이렇게 보면, useState가 아닌 useContext만 사용하면 되지 않나? 생각할 수도 있다. 하지만, useContext를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다는 단점이 있다. 리액트 공식문서에서도 단지 prop drilling 피하기 위해 사용하는 거라면, component composition 을 권장한다.
결론: 정말로 전체 컴포넌트에서 공유되어야 하는 값이 있을 때 사용하면 되고, 각 컴포넌트별로 관리하는 값이라면 useState를 쓰는 것이 적절하다.

• 오늘 알게 된 점:
  useContext를 사용함으로써 전체 컴포넌트에서 쉽게 데이터를 전송할 수 있다는 걸 알게 되었다.

• 오늘 배운 것 중 더 알고 싶거나 궁금한 점:
  근데 redux 사용하면 더 수월할 것 같다...? 오늘 공부하고 redux TIL 도 적어야지. 이외에도 component composition 에 대해 더 알면 좋을 것 같다.
  리액트 공식문서

• 오늘의 소감:
  보람찬 하루였다.

유튜브 별코딩