React - Context API

Context API

Definition

• React's built-in API that enables passing data to other components without using props

Necessity

• Globally required data is managed using state in the top-level App component and passed down via props. However, when this data must traverse multiple components, the process becomes highly complex.
  This challenge can be easily resolved using the Context API.

How to Use

Generation

• The Context API can be created using the createContext method.

• When creating it, you must provide one argument, and this value is used if the provider's value, which will be described later, is absent.

  • Example code

Passing Values

• There are three methods for passing values.

Provider

• Wrapping a component using Provider enables it to provide Context values to its child components - Example

//단일 데이터 방식 const testContextAPI = createContext('white'); //다중 데이터 방식 const testContextAPI = createContext({ { userData: { name: 'Blackburn', age: '22' } } } ); export default testContextAPI;


//App.js . . . return ( <TContext.Provider value={"green"}> <ExComponent> </ExComponent> </TContext.Provider> ); ~~~

- In the code above, the value is required. If you use the Provider but do not insert a value, an error occurs. - In the ExComponent, which is a child component of the provider component (TContext.Provider), you can retrieve and use the value from the Context API.

##### Consumer

- Consumer components enable data retrieval without needing to fetch values using existing props - Consumer components can be used in the following ways

###### How to Use

react return( <ComponentName.Consumer> { value=> ( <> {valueName} </> )} </ComponentName.Consumer> );

Example Code

~~~react import UserData from './Data/UInfo';

const UserUI = () => { return( <UserData.Consumer> { value => ( <> <li> `이름 : ${value.name}`</li>
	                    <li> `나이 : ${value.age}`</li> <li> `전화번호 : ${value.phoneNumber}`</li> </> ) } </UserData.Consumer> ); } ~~~

##### useContext

- Using the useContext() hook allows any component to access the provided value.

###### How to Use

~~~react function ExFunc(){ const contextData = useContext(context 이름); }; ~~~

- As shown above, the value can be retrieved and used.

Example Code

~~~react import UserData from './Data/UInfo';

function UserUI(){ const { userInfo } = React.useContext(UserData);
    return( <> <li> `이름 : ${userInfo.name}`</li> <li> `나이 : ${userInfo.age}`</li> <li> `전화번호 : ${userInfo.phoneNumber}`</li> </> ); } ~~~

<br><br><br><br><br><br>

---

References

[[React] Context API Concepts and Usage](https://velog.io/@jiyaho/React-Context-API%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95#props%EA%B0%80-%EC%95%84%EB%8B%8C-context-api%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%83%81%ED%99%A9%EC%9D%80-%EC%96%B4%EB%96%A4-%EA%B2%BD%EC%9A%B0%EC%9D%BC%EA%B9%8C)

[Hands-On! Modern Web Application Development with Spring Boot and React](https://www.yes24.com/Product/Goods/119973506)

[Mastering React](https://product.kyobobook.co.kr/detail/S000001792882)