돌아온 것을 환영합니다, 친구들!


오늘 우리는 useContext라는 React Hook의 기본 사항을 살펴보겠습니다. useContext는 useState를 뛰어넘어 props를 직접 전달하지 않고도 자식 및 손자 구성 요소에 정보를 전달할 수 있는 전역과 유사한 State를 생성하는 강력한 도구입니다.

그러나 나는 나 자신보다 앞서 나가고 있습니다.
useState에 익숙하지 않다면 이전 기사를 먼저 읽고 다시 돌아와서 놀랄 준비를 하십시오!


'useState' 사용 방법: https://dev.to/deborah/how-to-use-state-in-react-2pah

'useState'에 대해 알아보았으니 이제 'useContext'에 대해 자세히 살펴보겠습니다.

useContext란 무엇입니까?:

useContext는 전역 범위에 배치해야 하는 데이터(예: 애플리케이션 전체에 걸쳐 누군가 로그인 상태를 유지하는 사용자 이름)에 이상적이지만 최종적으로 지름길은 아닙니다. 소품을 하위 구성 요소에 전달합니다.
그러나 useContext를 사용하면 props를 직접 전달하지 않고도 데이터를 전달할 수 있으므로 여러 하위 구성 요소에서 액세스해야 하거나 애플리케이션 전체에서 사용할 수 있어야 하는 데이터를 만날 때 매우 유용합니다.

useContext를 시작하고 실행하려면 두 단계를 수행해야 합니다. 먼저 컨텍스트 객체('createContext')를 생성한 다음 'useContext' 후크를 사용하여 공급자를 통해 값에 액세스해야 합니다. .

다음 예는 useContext가 무엇인지, 어떻게 사용하는지에 대한 더 나은 아이디어를 제공하기 위해 단순화되었습니다. 하지만 createContext는 종종 별도의 자체 파일에서 선언된다는 점을 알아야 합니다. 그러나 나는 'Parent.js'를 일반적인 'App.js' 파일(컴포넌트 계층의 최상위에 있는 컴포넌트)에 비유하고 있습니다. Parent.js는 모든 상태 변수, 해당 상태 변수를 업데이트하는 함수를 정의하고 useEffect를 사용하여 데이터베이스로 가져오는 곳입니다. 나는 이 설명을 단순화하기 위해 자체 파일을 생성하는 대신 최상위 구성 요소에서 createContext를 선언하기로 선택했습니다. 그러면 Context의 핵심 개념을 더 잘 이해할 수 있습니다.

모든 내용을 마치고 맨 처음부터 시작해 보겠습니다. createContext!

1. 가장 먼저 해야 할 일은 나중에 하위 구성 요소에서 사용할 'Context'라는 변수를 선언하고 내보내는 것입니다. [우리는 코드를 더 단순하게 만들고 배치할 수 있도록 지금 변수를 생성하고 있습니다. 나중에 액세스할 수 있는 값(데이터)]:

export Context = React.createContext();

'Context'는 'createContext'를 호출하여 생성된 컨텍스트 개체입니다. 컨텍스트 개체에는 이제 '글로벌' 수준에서 유지하려는 변수와 함수를 호출하고 전달할 수 있는 Provider라는 구성 요소가 있습니다.

2. 'Context' 변수를 사용하여 이제 return 문에서 JSX로 이동해 보겠습니다. 여기서는 'Context'를 호출하고 여는 태그(꺾쇠 괄호)로 묶고 다음과 같이 Provider도 호출합니다.

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

'Context.Provider'를 완성하려면 'Provider'에도 값을 제공해야 합니다. 여기서는 하위 구성 요소에서 'Context'를 사용하여 호출할 모든 변수와 함수가 포함된 객체를 전달합니다.

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

변수와 함수를 사용할 모든 하위 구성 요소를 태그 사이에 넣어야 한다는 점에 유의하는 것이 매우 중요합니다. 예를 들어:

return(
    
);

props를 'value' 안에 넣는 한 ('useState'와 마찬가지로) props를 하위 구성 요소에 직접 전달할 필요가 없습니다.

이제 createContext를 사용하고 모든 전역 항목을 'Context.Provider'에 전달했으므로 하위 구성 요소로 이동하여 'Context'를 사용하는 방법을 확인할 준비가 되었습니다.

3. (이 예에서는) "Child.js" 파일에 저장되어 있는 하위 구성 요소를 살펴보겠습니다. 인생이 코딩과 마찬가지로 뭔가를 사용하고 싶다면 그것을 가져와야 합니다. 계속해서 'Parent.js'에서 선언한 곳에서 'Context'를 가져와서 이 하위 구성 요소('Child.js')에서 사용할 수 있도록 하겠습니다.

import Context from ‘./Parent.js’;

4. 이제 하위 구성 요소의 'Context'에 액세스할 수 있으므로 'useContext'를 파일로 가져와 'Context'를 전달할 수 있어야 합니다(자세한 내용은 곧 설명).

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. 좋아요! 이제 'useContext'를 사용해 보겠습니다. 먼저 'useContext'를 사용할 변수를 선언해야 합니다. useState를 선언하는 방법과 비슷한 방식으로 구성 요소 내에서 이 작업을 수행합니다.

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

이 코드에서는 구조 분해 할당을 나타내기 위해 중괄호 {}를 사용합니다. 이는 Context에 저장된 여러 변수와 함수를 호출할 수 있다는 멋진 표현입니다. 또한 Context.Provider('Parent.js'에서 선언한)에 정의된 값에 액세스할 수 있도록 'Context'를 'useContext'에 전달합니다.



6. 믿거나 말거나 모든 준비가 완료되었습니다! 이제 일반적으로 State를 사용하는 것처럼 코드에서 컨텍스트 값을 사용할 수 있습니다. 예를 들어:

const expId = example.id;

또는

setExample(newExample);

요약하자면:

축하해요! 이제 createContext 및 useContext를 시작하는 데 필요한 모든 도구가 있습니다. useContext를 사용하면 하위 구성 요소를 통해 직접 소품을 전달하지 않고도 변수와 함수를 구성 요소에 전달할 수 있는 '전역 상태'를 생성할 수 있다는 것을 이해합니다.

또한 애플리케이션에서 컨텍스트가 작동하도록 하는 데 필요한 6단계를 자세히 살펴보았습니다. 이제 createContext 및 useContext로 코딩을 시작할 준비가 되었습니다. 하지만 빠른 시작 가이드가 필요한 경우에는 여기를 참조하세요.

상위 구성 요소에서 'createContext'를 사용하여 'Context'라는 변수를 선언하고 내보냅니다.

export const Context = React.createContext();

상위 구성 요소의 JSX에서 Context.Proivder의 컨텍스트에 액세스해야 하는 모든 하위 구성 요소를 래핑하고 객체 내부에 변수/함수를 전달합니다.

   //Child components

하위 구성 요소에서 'useContext'를 가져옵니다.

import React, { useContext } from ‘react’;

또한 상위 구성 요소에서 'Context'를 가져옵니다.

import Context from “./Parent.js’;

그런 다음 useContext를 사용하고 이를 'Context' 변수에 전달합니다.

const { example, handleExample } = useContext(Context);

마지막으로, 현재 액세스할 수 있는 컨텍스트(위의 예에서는 'example' 및 'handleExample'임)를 사용하지만 하위 구성 요소에서는 필요합니다.

잘하셨어요! 그리고 다음 시간까지 즐거운 코딩 되세요!

마지막으로 이 주제에 대해 더 자세히 알아보고 싶다면 제가 useContext를 배우고 이 블로그를 작성하는 동안 참고한 공식 문서 리소스를 참조하세요.

공식 문서:
https://react.dev/reference/react/createContext

기존 공식 문서, useContext를 이해하는 데 여전히 어느 정도 도움이 됨:https://legacy.reactjs.org/docs/context.html