[TIL] 22.01.16

내일이 인턴으로 첫 출근..! 

 

오늘의 공부

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

위의 글을 참고하여 props까지 개념정리..도중 스톱. (사유: 졸림)

티스토리에서 임시저장하거나 업데이트하기 불편해서 노션에 넣음.

https://bright-bovid-f36.notion.site/React-71cf313d02f443aaaaaaf78fbc731261

React 공부

 

ContextAPI

ContextAPI를 적용하고자 하는 범위 내의 최상위 컴포넌트 파일의 컴포넌트 선언 위에 아래 코드 삽입. 

(명칭은 Cont 든 A든 상관 없음. 맨 앞이 대문자이고 다른거랑 겹치지만 않으면 됨. 이 글에서는 Cont로 부르겠슴..)

export const Cont = React.createContext();

 

이 최상위 컴포넌트 안에 useState를 사용하여 초기값을 넣어주고 dispatch용 함수를 만들어줌.

const initialItems = {
  one: "하나!",
  two: ["둘", "셋", "넷"],
  add: "문구를 변경해보자.",
};

const [item, setItem] = React.useState(initialItems);
const addItem = (newItem) => {
	setItem({ ...item, add: newItem });
};

여기서 addItem 이라는 dispatch용 함수는 setState를 이용하여 state에서 add가 key 값인 value를 변경함.

 

이 최상위 컴포넌트의 return에서 하위 컴포넌트들을 <Cont.Provider></Cont.Provider>로 감싸고 value={{넘겨줄 것들}} 을 열린 태그 쪽에 넣어줌.

return (
    <div>
      <Cont.Provider value={{ item, addItem }}>
        <ContextOne />
        <ContextTwo />
      </Cont.Provider>
    </div>
);

여기에서는 state인 item과 dispatch용 함수인 addItem을 넘겨줬음.

 

하위 컴포넌트에서는 값을 이렇게 불러올 수 있음.

import React from "react";
import { Cont } from "../pages/ContextAPI";

const ContextOne = () => {
  const { item } = React.useContext(Cont);

  return (
    <>
      {item.one}
    </>
  );
};

export default ContextOne;

이러면 item 안에 들어있던 one 의 초기값인 "하나!"가 출력됨.

 

함수는 이렇게 사용할 수 있음.

import React from "react";
import { Cont } from "../pages/ContextAPI";

const ContextOne = () => {
  const { item, addItem } = React.useContext(Cont);
  const text = React.useRef();
  const buttonClick = () => {
    addItem(text.current.value);
  };

  return (
    <>
      {item.add}
      <input ref={text} />
      <button onClick={buttonClick}>출력</button>
    </>
  );
};

export default ContextOne;

이러면 input창에 타이핑을 하고 출력 버튼을 눌렀을 때 ContextAPI를 통해 가져온 addItem이 실행되어 Cont가 있던 최상위 컴포넌트 안의 state, 즉 item의 add의 값이 변함에 따라 자식 컴포넌트 안에서 출력하는 item.add 도 변경됨.

 

참고 : https://cocoon1787.tistory.com/801

[React] 리액트 Hooks : useContext() 함수 사용법 (전역 상태 관리)

 

이분은 조금 다르게 사용하셨기에 다음에 테스트 예정.

https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook

 

오늘의 작업

ContextAPI 테스트

https://github.com/jjubbu/Try-React

GitHub - jjubbu/Try-React: 이것저것 테스트 해보는 원격저장소!