[React] Context API 연습

[React] Context API 연습

[210914]

유튜브에서 리덕스 관련 강의를 찾아다니던 중 발견한 예제. 방금 배운 context api를 연습해보았다.

Add Number 컴포넌트에서 더할 수를 입력하고 버튼을 누르면, Display Number 컴포넌트에서 누적된 수를 보여준다.

props 로 add-컴포넌트에서 display-컴포넌트로 값을 넘겨주기엔 거쳐야 하는 컴포넌트가 많아 조금 번거롭다.

이런 경우에 Context API 를 이용하면 좋다.

1. AddContext.js

import React, { createContext, useState } from "react"; const AddContext = createContext({ state: { add: 1, display: 0, }, actions: { setAdd: () => {}, setDisplay: () => {}, }, }); const AddProvider = ({ children }) => { const [add, setAdd] = useState(1); const [display, setDisplay] = useState(0); const value = { state: { add, display }, actions: { setAdd, setDisplay }, }; return {children}; }; export default AddContext; export { AddProvider };

context를 생성하고, 그 Provider를 렌더링하는 컴포넌트를 AddProvider 를 내보낸다.

두개의 state를 만들었다. add는 AddNumber에서 입력한 더할 수, display는 DisplayNumber에서 보여줄 수이다.

2. AddNumber.js

import React, { useContext } from "react"; import AddContext from "../context/AddContext"; const AddNumber = () => { const { actions, state } = useContext(AddContext); const onChange = (e) => { actions.setAdd(e.target.value); }; const onClick = (e) => { e.preventDefault(); let disp = parseInt(state.display); disp = disp + parseInt(state.add); actions.setDisplay(disp); }; return ( Add Number ); }; export default AddNumber;

useContext Hooks로 context를 받아온다. onChange 와 onClick 함수에선 input의 value를 받아와서 state를 업데이트한다.

3. DisplayNumber.js

import React, { useContext,} from "react"; import AddContext from "../context/AddContext"; const DisplayNumber = () => { const { state } = useContext(AddContext); return ( Display Number ); }; export default DisplayNumber;

state를 받아와서 input의 value를 업데이트해준다.

from http://9yujin.tistory.com/9 by ccl(A) rewrite - 2021-12-28 16:01:46