[TIL] 10월 1일 Context-API, GlobalState

기록하며 공부하자·2021년 10월 2일
0

Props에 대해서

폴더구조를 나눈 다음부터 주로 자식요소에서 주로 props로 부모요소로 부터 전달받아 사용을 많이 하였는데 이부분에서 비효율적인 부분이 있다.

index에서 정의한 함수를 presenter 파일에서 사용하고 싶다면 아래와 같은 props 과정을 거쳐야 한다.

props 예시 (Index)

import PropsContainer from "./Props.container";
export default function PropsPage() {
  return (
  	<PropsContainer 
      	isProps={isProps}
      />
  )
}

props 예시 (Contaienr)

import PropsUI from "./Props.presenter";
export default function PropsContainer(props) {
  return (
  	<PropsUI 
      	isProps={props.isProps}
      />
  )
}

props 예시 (presenter)

export default function PropsUI(props) {
  return (
    <div>
      {props.isProps}xxxx
    </div>
  );
}

index에서 정의한 내용을 presenter 에서 사용하려면 이렇게 불필요한 전달과정을 거치게 된다.
만약 이부분이 더 복잡한 경우라면 단계는 추가된다.

ContextAPI?

사이트의 페이지가 추가되거나 할수록 state의 숫자도 늘어나고 관리할 state도 많은데 모두 분산되어 있다면 state의 위치를 찾는것도 어려워 질거 같다.

contextAPI방식을 사용하면 가장 상위 부모요소에서 선언한 내용을 중간 요소를 건너뛰어서 사용할수 있다.

ContextAPI 예시 (Index)

import ContextContainer from "../../../src/components/units/24-context-api/Context.container";
import { createContext } from "react";
export const MyContext = createContext(null);
export default function ContextPage() {
  const value = {
    isEdit: true,
  };
  return (
    <MyContext.Provider value={value}>
      <ContextContainer />
    </MyContext.Provider>
  );
}

ContextAPI 예시 (Container)

import ContextUI from "./Context.presenter";
export default function ContextContainer() {
  return <ContextUI></ContextUI>;
}

ContextAPI 예시 (Presenter)

import { useContext } from "react";
import { MyContext } from "../../../../pages/quiz/20-02-context";
export default function ContextUI() {
  const { isEdit } = useContext(MyContext);
  return <div>{isEdit ? "수정하기" : "등록하기"}</div>;
}

Context API 방식을 사용하면 중간 Container 를 건너뛰고 Presenter에서 Index의 요소를 사용할수 있다.

사용 방법은 상위 Index에서 createContext를 react에서 import 해준후 해당 내용을 변수에 담아주고 export 해준다.

import { createContext } from "react";
export const MyContext = createContext(null);

그후 return 위 부분에서 전달해줄 값을 정의하고 임포트한 자식요소를 태그로 감싸주고 .Provider를 작성해준다.
(하위 요소들에게 공급한다는 의미인것 같다.)

export default function ContextPage() {
  const value = {
    isEdit: true,
  };
  return (
    <MyContext.Provider value={value}>
      <ContextContainer />
    </MyContext.Provider>
  );
}

전달받는 페이지에서는

import { useContext } from "react";
import { MyContext } from "../../../../pages/quiz/20-02-context";

2가지를 import 해주고 변수선언한 뒤 사용해주면 바로 적용이 된다.

export default function ContextUI() {
  const { isEdit } = useContext(MyContext);
  return <div>{isEdit ? "수정하기" : "등록하기"}</div>;
}

ContextAPI를 app.js에서 적용한다면 app.js에서 모든 state를 관리하며 하위 요소들에게 뿌려줄수 있다.

profile
프론트엔드 개발자 입니다.

0개의 댓글