(12).이정환_react.js강의_Context

● React_Context의 탄생 배경 :

○ TodoList 프로젝트 만들 때, onDelete, onUpdate를 제작 부분에서 props는 부모 => 직속 자식 전달방식만 가능하기에 아래의 사진과 같이 props 전달로 함수들을 옮겼었다.

만약, 규모가 큰 프로젝트라면, 중간다리가 시발 존나 많아짐 (Props Drilling)

○ 이것에 대한 단점의 해결점 : Context : props의 보관소 + 쿠팡배송

○ Context는 딱 1개만 있는 것이 아닌, 전달되는 징검다리 경로에 따라 개수가 정해져서 보관할 수 있다.

● 1_ Context 생성하기 :

○ 순서1_ import로 'react'에서 "createContext"메소드 불러오기

○ 순서2_ 컴포넌트 밖에서 createContext()객체로 생성,변수 초기

- App.jsx

import {createContext} from 'react';

const TodoContext = createContext(); //컴포넌트 외부에서 변수에 context 생성


function App(){//컴포넌트 내부

    .
    .
    .

}

○ 순서3_ 초기화한 TodoContext의 provider프로퍼티 이용

①. TodoContext.provider는 컴포넌트다.

②. 보관소에 props 넣기 => TodoContext.provider 컴포넌트의 value 속성에 객체형태로 넣기

③. 가장 상위 컴포넌트인 App컴포넌트에서 공급해야할 징겁다리를 잘 보고, 공급해야할 태그 , 컴포넌트를 감싸서 설정 //존나 특이하네

- App.jsx

function App(){

return (
    <div className="App">
      <Header />
      <Editor items={items} onCreateItem={onCreateItem} />
      <TodoContext.Provider //.Provider 컴포넌트의 value 속성값에 객체형태로, 전달할 props를 대입
        value={{
          items,
          onUpdateItem,
          onDeleteItem,
        }}
      >
        <List
          // onDeleteItem={onDeleteItem}
          // onUpdateItem={onUpdateItem}
          // items={items}
        />
      </TodoContext.Provider>//닫힌 태그로 징검다리 잘 보고 감싸기
    </div>
  );
}

=> 그럼 아래와 같은 계층구조와 Provider 컴포넌트의 공급 가능 구간 범위는 아래의 사진처럼 나타난다.

○ 순서4_ 다른 컴포넌트에서 TodoContext.Provider의 props 꺼내서 이용해보기

①. 꺼내서 사용할 컴포넌트에 import {useContext} from 'react';하고,

②. App컴포넌트에 createContext();의 변수를 외부 컴포넌트에서 사용할 수 있도록 ,export를 건뒤 , 사용할 컴포넌트에 import 한다.

③. const {보관품1,보관품2 } = useContext(컴포넌트 태그);로 꺼내서 적절히 사용한다,

- App.jsx

export const TodoContext = createContext();

- List.jsx

//①. useContext를 import

import {useContext} from 'react';

//②. App의 TextContext도 import
//시발 import 2번하네
import {TodoContext} from ',,App.jsx';

//ⓢ. 이제 보관소에서 함수, 데이터 꺼내기

const {물품1,물품2, ...} = useContext(TextContext);

 

● Context를 이용했더니, 문제가 발생 => 전에 재랜더링을 막았던 최적화가 해제됨 시발