Context-API를 사용하는 이유

• Context-API를 사용하는 이유를 이해하기 위해 먼저 Props-Drilling 이란 무엇인지 살펴보겠습니다 .

• 왼쪽 구성 요소 트리 이미지를 보십시오.
• 트리의 맨 아래에 있는 Child Component에 데이터가 필요한 경우가 있을 수 있지만, 중간에 있는 Container Component 나 Child Component에는 해당 Data가 필요하지 않을 수 있습니다.
• 이 경우 중간 Component는 데이터가 필요하지 않지만 자식 Component에 전달하기 위해 데이터를 수신해야 합니다.
• 애플리케이션이 너무 크면 큰 문제가 발생합니다. 개발자는 한 구성 요소에서 다음 구성 요소로 데이터를 계속 전달해야 합니다.
• 이 문제를 Props Drilling이라고 합니다.

• Context-API에서는 데이터를 저장해야 하는 구성 요소 트리 외부에 별도의 저장 공간이 생성됩니다.
• 이제 구성 요소 내부에 해당 데이터가 필요한 경우 Context-API에서 데이터에 직접 액세스할 수 있습니다.
• 이제 예제를 통해 이것이 어떻게 작동하는지 봅시다.

• CreateContext 에 React의 createContext() 를 사용할 수 있습니다 .
• UserContext가 생성되면 내보내야 합니다.
• 이제 Context 내부에 데이터를 추가하려면 부모 요소를 <UserContext.Provider> 또는 <UserProvider> 로 래핑해야 합니다 .
• Wrapper로 래핑하면 데이터를 값 속성 에 전달해야 합니다.

1) 기능 구성 요소에서.

2) 클래스 구성요소의 라이프사이클 메소드에서.

3) 클래스 구성 요소의 렌더링 방법에서.

1) 기능 구성 요소에서:-

• Functional Component 또는 Hooks 내부 에서는 React 패키지에서 제공하는 useContext() Hook 을 사용해야 합니다.
• 이제 UserContext를 가져와서 useContext()에 전달해야 합니다 .
• useContext(UserContext) 는 우리가 더 사용할 수 있는 Context.내에서 사용자 데이터를 반환할 것입니다.

• 클래스 구성 요소에서 Context에 액세스하는 가장 일반적인 방법은 static 을 사용하는 것 contextType입니다.
• 외부 render또는 수명 주기 메서드 에서 Context의 값이 필요한 경우 이 방법을 사용합니다.

• 컨텍스트 값을 검색하는 전통적인 방법은 Consumer.
• 거기에서 value prop에 로 액세스할 수 있습니다 props.
• 여전히 이것을 볼 수 있지만 Context에 액세스하는 기존 방식에 가깝습니다.