[230517] useEffect와 useMemo의 차이 | context | useContext

⚛️ useEffect와 useMemo의 차이

useEffect
상태가 변화되었을 때를 감지하여 렌더링 후에 실행된다.
상태를 이용한 관리에 사용한다.
💡 데이터 요청시 요청하는 주소[상태]가 달라질 수 있기 때문에 useEffect가 적합하다.

useMemo
상태가 바뀌었는지 확인하고 렌더링 전에 실행되어 저장(메모이제이션)된 것을 반환한다.
렌더링에 직접적인 영향을 미칠 수 있다.
값을 저장하여 불필요한 동작 또는 렌더링을 막는 최적화에 사용한다.

⚛️ context

props drilling: 컴포넌트를 통과하면서 props를 전달
-> 중간 컴포넌트들은 props가 필요 없을 수 있다. 단지 전달을 위해서 계속해서 불필요한 props를 사용하게 되고 의미 없는 값들이 컴포넌트들을 스쳐가게 된다.

이때 사용하는 것이 context다. context는 props를 사용하지 않고 필요한 자손에게 직접 데이터를 전달하도록 해준다.
context를 사용하는 이유는 프로젝트의 컴포넌트 수가 많아지고 계층 구조가 복잡해지면서 props로 전달하는데 한계가 있기 때문이다. props drilling을 피하기 위해
context: props에 대한 전역 데이터 저장소, 필요한 컴포넌트 어디서든지 데이터에 접근 가능하다.

💡 최적화와 관련이 크다. 반드시 사용할 필요는 없지만 사용하면 코드구조가 깔끔해질 수 있다.

💡 반드시 필요한 데이터만 넣기

💡 어떤 데이터가 들어가면 좋을까?
다크모드, 언어, API 주소, 회원정보 등 전역 공간에서 공유할 수 있는 데이터

• API 주소
  컴포넌트에서 필요할 때 원하는 API 주소를 뽑아서 사용할 수 있도록
• 회원정보
  컴포넌트가 회원의 정보(회원의 등급, 로그인 여부)에 따라 다른 정보를 보여줄 필요가 있기 때문에

API

React.createContext
context를 생성한다.

import { createContext } from 'react';
const UserInfo = createContext(defaultValue);

Context.Consumer
데이터를 사용할 컴포넌트 안에서 사용
Consumer를 사용하여 Provider에서 전달받은 Context 값을 사용할 수 있다. Consumer는 Provider로부터 값을 받아올 때 콜백 함수를 사용한다. 이 콜백 함수의 인자로 전달되는 값은 Provider에서 전달한 Context 값이다.

const Hello = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

💡 Consumer는 자식으로 태그를 가질 수 없다.

Context.Provider
데이터를 전달할 컴포넌트 안에서 사용
Provider는 컴포넌트 계층 구조(부모-자식)에서 Context 객체를 전달하는 역할을 한다. Provider를 사용하여 하위의 Consumer가 Provider가 제공하는 값을 사용할 수 있게 된다.

const App = () => {
  return (
    <UserInfo.Provider value={{ name: "jisoo", id: "mallang" }}>
      <Hello />
    </UserInfo.Provider>
  );
};

💡 Provider로 값을 전달하지 않으면 에러가 발생하기 때문에 꼭 value를 넣어야 한다.

⚛️ useContext

useContext Hook을 사용하여 context에 접근한다.

import { useContext, createContext } from "react";

const UserInfo = createContext({ name: "jisoo", id: "mallang" });

const App = () => {
  return (
    <Hello/>
  );
};

const Hello = () => {
  const { name, id } = useContext(UserInfo);
  return (
    <div>
      <h2>{name}</h2>
      <strong>{id}</strong>
    </div>
  );
};

export default App;

💡 가상 서버 만들기
https://www.npmjs.com/package/json-server?activeTab=readme
1. Install JSON Server

npm install -g json-server

2. Create a db.json file with some data
3. Start JSON Server

json-server --watch db.json

💡 import 문법

import App from "./App";		// export default한 경우
import { App } from "./App";	// export한 경우