Context API 사용법

데이터를 전역에서 관리해주는 ContextAPI 훅을 사용하는법이다.

state와 props를 활용해 데이터를 이동시키는 부분은 생략하였다.

 

1. 데이터 state관리

1-1. App컴포넌트 밖에 createContext() 만들기

자바스크립트 파일 여기저기에서 사용하려면 export를 맨 앞에 붙여서 context를 생성한다.

export const DataStateContext = React.createContext()

1-2. App 컴포넌트안에 context를 불러온다.

useState를 활용하여 data를 저장한뒤에 context태그 안에 value안에도 넣는다.

function App() {
	const [data, setData] = useState()
    //대충 data를 가져오는 API를 호출하여 setData에 저장하는 코드
    const getDataList = async () => {
        const res = await fetch(`/game/api/notice`)
        .then(res => res.json())

        console.log(res)
        setData(res.list.map(it => {
            return {
                id:it.id,
                writer:it.writer,
                title:it.title,
                contents:it.contents,
                updated_at:it.updated_at,
                visible:it.visible
            }
        }))
    }
    //랜더링 생성때 호출
    React.useEffect(()=>{
        console.log('호출')
        getDataList()
    },[])
	return(
    	<DataStateContext.Provider value={data}>
            <div>
            	...
                <NoticeList>
            </div>
        </DataStateContext.Provider/>
    )
}

1-3. 자식 컴포넌트안에서 마음껏 불러와서 사용.

좌측이미지처럼 data를 props와 state로 일일이 넣어주고 받고하는과정이 없어진다.

const data = React.useContext(DataStateContext)

React developer tool을 통하여 만들어진 Context훅을 확인 할 수 있다.

Context.Provider태그 value값에 data가 담겨있는모습

자식 컴포넌트인 UserList에서 Context의 데이타를 불러온 모습

2. CRUD 관련 함수props

또다른 Context API를 생성하고 useMemo를 활용하여 crud관련함수를 넣어준다.

useMemo를 사용하여 불필요한 함수 재생성을 막을수있다.

const DispatchContext = React.createContext()

//useMemo를 사용하면 dispatches를 재생성하지않게함
const memoizedDispaches = React.useMemo(()=>{
    return {onCreate, onRemove, onEdit}
},[])

app 컴포넌트를 한번더 감싸준다.

원하는 자식컴포넌트에 활용한다.

https://dubaiyu.tistory.com/395

 

useReducer 복잡한 상태관리 로직분리