반응 후크 - useContext

그것은 무엇입니까?

useContext 후크는 중첩된 여러 자식 구성 요소를 통해 props를 보내야 할 때 사용할 수 있는 훌륭한 후크입니다.

아래로 내려가는 모든 단일 구성 요소를 통해 전달하는 대신 상위 구성 요소에서 정의할 수 있습니다. 그런 다음 일반적으로 전달해야 하는 중간 구성 요소를 건너뛰면서 필요한 중첩 구성 요소로 가져옵니다.

다음은 예입니다.

앱 구성 요소가 있다고 가정해 보겠습니다. 해당 App 구성 요소 내부에는 Profile 구성 요소가 있습니다. Profile 구성 요소 내부에는 Greeting 구성 요소가 있습니다.

그래서 그건:

App --> Profile --> Greeting

이제 App(부모) 구성 요소에 사용자가 있고 사용자 속성을 Greeting(중첩된 자식) 구성 요소에 전달하려고 한다고 가정해 보겠습니다.

일반적으로 해당 속성을 Profile 구성 요소를 통해 보낸 다음 Greeting 구성 요소로 보내야 합니다. 이렇게:

//App.js
const App = () => {
  let user = 'Shred Flanders';
  return <Profile user={user} />
}

//Profile.js
const Profile = props => {
 return <Greeting user={props.user}/>
}

//Greeting.js
const Greeting = props => {
  return `Welcome, {props.user}!`
}

컨텍스트 만들기

useContext 사용을 시작하려면 먼저 컨텍스트를 만들어야 합니다. 따라서 App(부모) 구성 요소에서 React에서 createContext를 가져올 것입니다. 그런 다음 사용자 컨텍스트를 만듭니다.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();

Note: we're exporting the UserContext so we can import it
into nested components later.

해당 UserContext를 사용하여 구성 요소 주위에 공급자를 래핑한 다음 모든 하위 구성 요소의 속성을 사용할 수 있습니다.

따라서 원하는 위치에 해당 공급자를 설정하고 속성을 전달합니다.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();
const App = () => {
  let user = 'Shred Flanders';
  return (
  <UserContext.Provider value={user}>
    <Profile />
  </UserContext.Provider>
  )
}

이제 사용자 속성을 프로필로 보내지 않습니다. value={user} 를 통해 UserContext Provider로 전송합니다. 그런 다음 중첩된 구성 요소에서 해당 값을 가져올 수 있습니다.

컨텍스트 사용

중첩된 구성 요소의 값을 사용하려면 useContext 후크와 사용하려는 컨텍스트를 가져와야 합니다.

따라서 Greeting 구성 요소에서 다음을 수행합니다.

//Greeting.js
import { useContext } from 'react'
import { UserContext } from './App.js'

그런 다음 UserContext를 useContext 후크에 전달하여 사용할 컨텍스트를 후크에 알립니다.

const Greeting = props => {
  const user = useContext(UserContext);
}

useContext는 우리가 UserContext.Provider value={user}로 보낸 값을 반환할 것입니다. Greeting 구성 요소에서 상수 변수user에 저장합니다.

이제 Greeting 구성 요소에서 해당 상수/값을 자유롭게 사용할 수 있습니다.
(그리고 우리는 Profile 컴포넌트를 건드릴 필요가 없었습니다! 🎉)

const Greeting = props => {
  const user = useContext(UserContext);
  return `Welcome, {user}!`
}

결론

useContext 후크는 React에서 매우 유용한 도구입니다. 테마를 변경하고 필요한 다른 구성 요소에서 해당 테마를 업데이트하는 데 사용할 수 있습니다. 여기에서 보여드린 것처럼 "프롭 드릴링"을 방지합니다.

더 시각적인 예를 보려면 여기에서 내 YouTube 동영상을 확인하세요.



비슷한 주제에 대해 배우고 싶다면 내 및 .

누군가에게 도움이 되었기를 바라며 읽어주셔서 감사합니다!

-앤드류