4. useContext

4.1 useContext란?

4.1.1. 컨텍스트 정의

4.1.2. Context 종류

4.2 useContext 기본 사용법

4.2.1. 기존의 contextAPI를 사용하는 방법

import Customer1 from "./Customer1";
import Customer2 from "./Customer2";
import { MenuContext } from "./Context";

function App() {
  return (
    <MenuContext.Provider
      value={{
        아메리카노: "3500",
        카페라떼: "4000",
      }}
    >
      <Customer1 />
      <Customer2 />
    </MenuContext.Provider>
  );
}
export default App;

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

/* Customer1.jsx */
import { MenuContext } from "./Context";
export default function Customer1() {
  return (
    <MenuContext.Consumer>
      {(price) => <div>1번 고객님은 {price.아메리카노}원을 지불합니다. </div>}
    </MenuContext.Consumer>
  );
}


/* Customer2.jsx */
import { MenuContext } from "./Context";
export default function Customer2() {
  return (
    <MenuContext.Consumer>
      {(price) => <div>2번 고객님은 {price.카페라떼}원을 지불합니다. </div>}
    </MenuContext.Consumer>
  );
}

4.2.2. useContext 사용하는 방법

import { useContext } from "react";
import { MenuContext } from "./Context";
export default function Customer1() {
  const price = useContext(MenuContext);
  return <div>1번 고객님은 {price.아메리카노}원을 지불합니다. </div>;
}

/*--------------------------------------------------------------*/
/* Customer2.jsx */
import { useContext } from "react";
import { MenuContext } from "./Context";
export default function Customer2() {
  const price = useContext(MenuContext);
  return <div>2번 고객님은 {price.카페라떼}원을 지불합니다. </div>;
}

import Customer1 from "./Customer1";
import Customer2 from "./Customer2";

function App() {
  return (
    <>
      <Customer1 />
      <Customer2 />
    </>
  );
}
export default App;

import { createContext } from "react";
const Menu = {
  아메리카노: "3500",
  카페라떼: "4000",
};
export const MenuContext = createContext(Menu);

4.2.3. useState 상태값 넘겨주기

import { createContext } from "react";
const Menu = {
  아메리카노: "3500",
  카페라떼: "4000",
};
export const MenuContext = createContext(Menu);

export const OpenContext = createContext();

/*App.jsx*/
import { useState } from "react";
import Customer1 from "./Customer1";
import Customer2 from "./Customer2";
import Store from "./Store";
import { OpenContext } from "./Context";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="App">
      <OpenContext.Provider value={{ isOpen, setIsOpen }}>
        <Store />
        <Customer1 />
        <Customer2 />
      </OpenContext.Provider>
    </div>
  );
}
export default App;

import { useContext } from "react";
import { OpenContext } from "./Context";

export default function Store() {
  const { isOpen, setIsOpen } = useContext(OpenContext);
  const ClickOpen = () => {
    setIsOpen(true);
  };
  const ClickClose = () => {
    setIsOpen(false);
  };
  return (
    <div>
      가게문이 {isOpen ? "열렸습니다" : "닫혔습니다"}
      <br />
      <button onClick={ClickOpen}>가게문 열기</button>
      <button onClick={ClickClose}>가게문 닫기</button>
    </div>
  );
}

4.3. Props Drilling

4.3.1. 예제 설명

4.3.2. src 폴더 구조

├─ src
│  │  
│  └─ components
│     ├─ Button.jsx   
│     ├─ KPopList.jsx
│     └─ Main.jsx   
│         
├─ App.css
├─ App.jsx
└─ index.js

4.3.3. 컴포넌트 구조

4.3.4. 각 파일에 대한 설명

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// App.jsx

import Main from "./components/Main";
import "./App.css";
import { useState } from "react";

export default function App() {
  const data = [
    {
      title: "Psycho",
      artist: "Red Velvet",
      releaseDate: "2019.12.23",
      gender: "female",
    },
    {
      title: "Feel My Rhythm",
      artist: "Red Velvet",
      releaseDate: "2022.03.21",
      gender: "female",
    },
    {
      title: "Beatbox",
      artist: "NCT DREAM",
      releaseDate: "2022.05.30",
      gender: "male",
    },
    {
      title: "Attention",
      artist: "NewJeans",
      releaseDate: "2022.08.01",
      gender: "female",
    },
    {
      title: "Rush Hour",
      artist: "Crush (Feat. j-hope of BTS)",
      releaseDate: "2022.09.22",
      gender: "male",
    },
  ];

  const [playlist, setPlaylist] = useState(data);

  return (
    <>
      <h1>K-POP 플레이 리스트</h1>
      <Main data={data} playlist={playlist} setPlaylist={setPlaylist} />
    </>
  );
}

//Main.jsx

import React from "react";
import Button from "./Button";
import KPopList from "./KPopList";

// data, playlist, setPlaylist를 props로 전달받은 후, 하위 컴포넌트에 props를 전달합니다. 
function Main({ data, playlist, setPlaylist }) {
  return (
    <>
      <Button data={data} setPlaylist={setPlaylist}>
        💃🏻 레드벨벳 노래 찾기
      </Button>
      <Button data={data} setPlaylist={setPlaylist}>
        🎤 남자 아티스트 노래 찾기
      </Button>
      <Button data={data} setPlaylist={setPlaylist}>
        🎵 여자 아티스트 노래 찾기
      </Button>
      <KPopList playlist={playlist} />
    </>
  );
}

export default Main;

// KPopList.jsx

import React from "react";
import { v4 as uuidv4 } from "uuid";

// playlist를 props로 전달받습니다. 
function KPopList({ playlist }) {
  return (
    <ul>
      {playlist.map((song) => (
        <li key={uuidv4()}>
          <h3>{song.title}</h3>
          <strong>{song.artist} </strong>
          <span>({song.releaseDate})</span>
        </li>
      ))}
    </ul>
  );
}

export default KPopList;

//Button.jsx

import React from "react";

// props로 data, setPlaylist 를 전달받습니다. 
function Button({ data, setPlaylist, children }) {
  // 버튼의 내용에 따라 플레이리스트를 필터링합니다.
  let result = [...data];

  if (children === "💃🏻 레드벨벳 노래 찾기") {
    result = data.filter((song) => song.artist === "Red Velvet");
  }
  if (children === "🎤 남자 아티스트 노래 찾기") {
    result = data.filter((song) => song.gender === "male");
  }
  if (children === "🎵 여자 아티스트 노래 찾기") {
    result = data.filter((song) => song.gender === "female");
  }

  const handleClick = () => {
    setPlaylist(result);
  };
  console.log(data);
  return <button onClick={handleClick}>{children}</button>;
}

export default Button;

4.3.5. 실행화면

4.3.6. Props Drilling의 문제점

4.4 Context API와 useContext Hook을 사용해 props drilling 해결하기

4.4.1. src 폴더 구조

src
│  
├─ components
│  ├─ Button.jsx   
│  ├─ KPopList.jsx
│  └─ Main.jsx
│ 
├─ context
│  └─ context.jsx 
│        
├─ App.css
├─ App.jsx
└─ index.js

4.4.2. 컴포넌트 구조

4.4.3. 각 파일에 대한 설명

import {createContext, useState} from "react";

const data = [
  {
    title: "Psycho",
    artist: "Red Velvet",
    releaseDate: "2019.12.23",
    gender: "female",
  },
  {
    title: "Feel My Rhythm",
    artist: "Red Velvet",
    releaseDate: "2022.03.21",
    gender: "female",
  },
  {
    title: "Beatbox",
    artist: "NCT DREAM",
    releaseDate: "2022.05.30",
    gender: "male",
  },
  {
    title: "Attention",
    artist: "New Jeans",
    releaseDate: "2022.08.01",
    gender: "female",
  },
  {
    title: "Rush Hour",
    artist: "Crush (Feat. j-hope of BTS)",
    releaseDate: "2022.09.22",
    gender: "male",
  },
];

// createContext()를 사용하여 context 객체를 생성합니다.
const KPopContext = createContext();

// Provider 컴포넌트를 리턴하는 KPopContextProvider를 생성합니다.
const KPopContextProvider = ({children}) => {
  const [playlist, setPlaylist] = useState(data);

  return (
    <KPopContext.Provider value={{data, playlist, setPlaylist}}>
      {children}
    </KPopContext.Provider>
  )
};

export {KPopContext, KPopContextProvider};

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import {KPopContextProvider} from "./context/context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <KPopContextProvider>
      <App />
    </KPopContextProvider>
  </React.StrictMode>
);

import "./App.css";
import Main from "./components/Main";

function App() {
  return (
    <>
      <h1>K-POP 플레이 리스트</h1>
      <Main />
    </>
  );
}

export default App;

import React from "react";
import Button from "./Button";
import KPopList from "./KPopList";

function Main() {
  return (
    <main>
      <Button>💃🏻 레드벨벳 노래 찾기</Button>
      <Button>🎤 남자 아티스트 노래 찾기</Button>
      <Button>🎵 여자 아티스트 노래 찾기</Button>
      <KPopList />
    </main>
  );
}

export default Main;

import React, {useContext} from "react";
import {v4 as uuidv4} from "uuid";
import {KPopContext} from "../context/context";

function KPopList() {
  const {playlist} = useContext(KPopContext);

  return (
    <ul>
      {playlist.map((song) => (
        <li key={uuidv4()}>
          <h3>{song.title}</h3>
          <strong>{song.artist} </strong>
          <span>({song.releaseDate})</span>
        </li>
      ))}
    </ul>
  );
}

export default KPopList;

import React, {useContext} from "react";
import {KPopContext} from "../context/context";

function Button({children}) {
  const {data, setPlaylist} = useContext(KPopContext);

  // 버튼의 내용에 따라 플레이리스트를 필터링합니다.
  let result = [...data];

  if (children === "💃🏻 레드벨벳 노래 찾기") {
    result = data.filter((song) => song.artist === "Red Velvet");
  }
  if (children === "🎤 남자 아티스트 노래 찾기") {
    result = data.filter((song) => song.gender === "male");
  }
  if (children === "🎵 여자 아티스트 노래 찾기") {
    result = data.filter((song) => song.gender === "female");
  }

  const handleClick = () => {
    setPlaylist(result);
  };

  return <button onClick={handleClick}>{children}</button>;
}

export default Button;

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap");

* {
  font-family: "Noto Sans", sans-serif;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  padding: 10px 5px;
  list-style: none;
}

li + li {
  border-top: 1px solid #bdbdbd;
}

h3 {
  margin: 0;
  line-height: 32px;
  font-size: 20px;
}

button {
  border: none;
  background-color: #dfebff;
  color: #007aff;
  padding: 7px 15px;
  border-radius: 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin: 3px;
}

strong {
  font-weight: 500;
}

4.4.4. 정리