[React] contextAPI

 

contextAPI는 부모와 자식간에 다층관계가 되면 props 물려주는게 힘든점을 개선해준다. contextAPI에서 접근할 수 있는 데이터가 있는데, 여기에 접근하고 싶은 컴포넌트들을 contextAPI가 제공하는 Provider로 묶어줘야한다.(아래 참고)

 

Main.jsx

import React, {createContext} from 'react';

export const TableContext = createContext({
    tableData: [],
    dispatch: () => {},
});

여기에서는 이렇게 전달할 데이터들의 모양만 맞춰주면 된다.

 

…
<TableContext.Provider value={{ tableData: state.tableData, dispatch }}>
    <Form />
    <div>{state.timer}</div>
    <Table />
    <div>{state.result}</div>
</TableContext.Provider>

데이터들은 value에 넣는다. 이 데이터들은 자식 컴포넌트들에게 바로 전달해줄 데이터들이다. 그러면 자식 컴포는트들에서 접근 가능한 데이터들이 된다. 

 

그리고 자식 컴포넌트에서 contextAPI를 연결 시키는 방법은

Form.jsx

import React, { useContext } from 'react';

const Form = () => {
	const value = useContext(TableContext);
…
}

이런식으로 하면 된다. 그러면 가져올 때는

value.dispatch, value.tableData 이렇게 가져올 수 있다. 또한

 

{ tableData, dispatch } = useContext(TableContext);

 

이런식으로 구조분해해서 사용 가능하다.