DAY : 15
ReactDay : 5

1. useContext

: 다음과 같은 구조에서 변수 A가 props로 모두 연결되어 있다면,
'울트라'의 A 업데이트 시 관련 함수 및 변수들을 모두 props로 추가 연결해야 한다. 파일의 수가 고작 4개라면 괜찮을지도 모르지만 40개 400개의 파일이라 상상한다면 끔찍할 테다.

이때, useContext를 사용하면 된다.
useContext는 기존 props, 구조분해와 반대로 App에서 변수를 지정한다.

CODE

메인파일(App.jsx)
1. react에서 createContext를 import
2. 상수 AppContext 선언 후 export하기 : component파일에서 사용하기 위함
3. useState이용해서 변수, 함수 지정
4. provider를 사용 내용감싸기 : <AppContext.Provider>
5. 가져갈 변수 value값으로 적어주기

import Component1,2... from 파일경로; // 내용 들고오기
import { useState } from "react";
import { createContext } from "react";

export const AppContext = createContext(); 

function App() {
  const [gift, setGift] = useState(0);
  
  return (
    <AppContext.Provider value={{ gift, setGift }}>
      <div>
        <Component1 />
        <Component2 />
      </div>
    </AppContext.Provider>
  );
}
export default App;

Component 파일
1. 변수가 필요한 파일에서 useContext, AppContext를 import
2. 필요한 변수 들고오기
3. return내에서 {}로 사용

import { useContext } from "react";
import { AppContext } from "../App";

const ChildFriend = () => {
  const { 변수 } = useContext(AppContext);

  return (
    <div>
      <div>내용 : </div>
      {변수}
    </div>
  );
};

export default ChildFriend;

➕ Class Component VS Functional Component

class형

• 다양한 기능을 제공하는 import { Component } from "react"; 사용한다.
• 렌더링 외에도 이것저것 할 수 있는 기능이 많다.
• 고전(?)의 느낌이라 이것만 좋아하시는 분들도 있다.

함수형(Functional)

• 화면에 표출하는 렌더링이 유일한 기능이다.
• 화살표 함수 쓸 때 짧고 간편해서 좋다.
• 다양한 기능을 추가적으로 사용하고 싶어서 Hooks라는 기능을 만들어냈다.
• Hooks를 사용하면 class형에서 썼던 기능들을 사용할 수 있다.
• Hooks문법은 기존 class형을 사용하시던 분들에게 불호일 수도 있다.