[React] context

정보를 공유할 때 사용한다

현재 우리의 앱은 이벤트핸들러(초록색)을 컴퍼넌트 하위요소까지 전달하는 지루하고 실수하기 쉬운 작업들을 하고있는데

 refactor을 사용하면 이런 실수를 줄일 수 있다고 함

 

컨텍스트를 통해 공유하는 작업

여기서 중요한 것은 

 context는 communication chennel이고 data를 공유하는지, 그 처리는 어떻게 되는지 전혀 상관하지 않는다

Redux는 organization data

 

암틑 컨텍스트를 사용해보도록 하게음

 

1. context 생성하기

 

 

2. context import하기 - index.js

render부분을 이렇게 수정하면

app에서 렌더링 하는 모든 요소들은 context.provier의 value를 사용할 수 있다

 

 

확인. BookList.js에서 context 불러오고 useContext사용하여 값을 가져온다음(6행)에 출력해보았따(13행)

{value} 숫자 잘 뜸

그럼 custom provider를 만들어보자

이건 변수도 전달하고 함수도 전달할 수 있음!

 

- Custome Provider

대충 컨셉은 이러하다

 

그럼 수정해봐야지

- books.js (provider)

    import { createContext } from "react";
    import { useState } from "react";

    const BooksContext = createContext();
    function Provider({children}){
        const [count,setCount] = useState(5);
        const valueToShare = {
            count,
            incrementCount:()=>{
                setCount(count+1);
            }
        }
        return <BooksContext.Provider value={valueToShare}>
            {children}
        </BooksContext.Provider>
    }

    export{Provider};
    export default BooksContext;

custom context를 생성하고 여기에 object로 변수와 incrementCount라는 함수를 전달하고

context의 value에는 위 object를 입력하고

export {Provider}했다

 

 

- BookList.js

import BookShow from "./BookShow";
import { useContext } from "react";
import BooksContext from "../context/books";

function BookList({books, onDelete, onEdit}){
    const {count, incrementCount} = useContext(BooksContext);

    const renderBooks = books.map((book) => {
        return <BookShow key={book.id} book={book} onDelete={onDelete} onEdit={onEdit}/>;
    });    
    return <div className="book-list">
        {count}
        <button onClick={incrementCount}>Click</button>
        {renderBooks}
    </div>
}
export default BookList;

BooksContext를 import함

6행 : BooksContext에서 valueToShare로 설정한 object 가져옴

12행 : count 출력

13행: 버튼 클릭할 때 count를 1씩 증가하고 화면에서 업데이트함

빨간색 동그라미가 {count}

잘 된다

 

이제 사용방법을 알았으니 다음엔 기존 app을 refator 해보겠다