context, 페이지 라우팅 (React.js_04)

#01. Context

 

[Context]

리액트에서 자식의 자식 컴포넌트에게 데이터를 직접 전달하지 못하는 문제(Props Drilling)를 해결하기 위해서 사용

- createContext : 생성

- Consumer : 소비자

- Provider : 공급자

 

context가 여러 컴포넌트를 하나의 context로 묶을 수 있음

(388p 그림 참고)

 

- React를 import하여 사용, 컨텍스트 변수는 컴포넌트 바깥에 선언(App  function 바깥에 선언)

import React, { useReducer, useRef, useCallback } from 'react';

const TodoContext = React.createContext(); // 컨텍스트 변수는 컴포넌트 바깥에 선언

 

- 감싸고자 하는 컴포넌트 감싸기

            <TodoContext.Provider value={{ todo, onCreate, onUpdate, onDelete }}>

                <TodoEditor />

                <TodoList />

            </TodoContext.Provider>

 

 

-메인(App.js) 파일에서 컨텍스트 export하고 자식 컴포넌트에서 해당 컨텍스트 import받기, useContext로 컨텍스트가 전달하는 데이터를 storeData에 저장

export const TodoContext = React.createContext(); // 컨텍스트 변수는 컴포넌트 바깥에 선언

import { TodoContext } from '../App'; // (TodoList에서 import 받음)

....

const TodoList = ({전달 데이터}) => {

...

    const storeData = useContext(TodoContext);

...}

 

- 코드에서 이전에 넘겨주기 용으로만 작성했던 코드 생략하기

- 컨텍스트 잘못 사용하면 기능과 관련없는 컴포넌트들이 한번에 업데이트 되어서 비효율적일 수 있다

 

[기능에 따른 Context 분리]

- 기능에 따른 정의, 넘기는 데이터 다르게 

export const TodoStateContext = React.createContext(); // 컨텍스트 변수는 컴포넌트 바깥에 선언

export const TodoDispatchContext = React.createContext();

            <TodoStateContext.Provider value={{ todo }}>

                <TodoDispatchContext.Provider

                    value={{ onCreate, onDelete, onUpdate }}

                >

                    <TodoEditor />

                    <TodoList />

                </TodoDispatchContext.Provider>

            </TodoStateContext.Provider>

 

 

#02. 페이지 라우팅

 

[ 페이지 라우팅 ]

- 패키지 관리 도구: npm, npx, yarn

- 파라미터 받는 방법

1. url 파라미터(라우터변수, 동적경로) :useParams();

2. 쿼리스트링: useLocation(), useSearchParams(), http://localhost:3000/?sort=latest 와 같은 url에서 sort 값을 받아옴.