๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[๊ฐœ๋ฐœ] Practice/React

[React] props ๋Œ€์‹  Context API ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

by Connecting-the-dots 2022. 3. 27.
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ’ก ์‹ค์Šต ํฌ์ธํŠธ!

๐Ÿ’œ props ๋Œ€์‹ ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ• ์ฐพ์•„๋ณด๊ธฐ

  • Component ๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์ค‘์ฒฉ๋˜์–ด ์žˆ์œผ๋ฉด props ๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ์—ฐ์†์œผ๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • ๋งŒ์•ฝ ์ด๋ ‡๊ฒŒ props ๋ฅผ ์—ฐ์†์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์‹ซ๋‹ค๋ฉด Redux ๋ฅผ ์‚ฌ์šฉํ•˜๋“ ์ง€ Context ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
  • ๊ทธ๋Ÿฌ๋ฉด props ๋ฅผ ์ „์†กํ•˜์ง€ ์•Š๊ณ ๋„ ํ•˜์œ„ Component ๋“ค๋ผ๋ฆฌ state ๊ฐ’๋“ค์„ ๋˜‘๊ฐ™์ด ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋‹ค๋งŒ ์ค‘์ฒฉ๋œ Component ๊ฐ€ ๋ช‡ ๊ฐœ ์—†๋‹ค๋ฉด props ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ๊ฐ„๋‹จํ•˜๊ณ  ํŽธ๋ฆฌํ•˜๋‹ค.

๐Ÿ’œ Context ๋ฌธ๋ฒ•์œผ๋กœ props ์—†์ด state ๊ณต์œ ํ•˜๊ธฐ

  • Context ๋ฌธ๋ฒ•์€ ๋ชจ๋“  ํ•˜์œ„ Component ๋“ค์ด props ์—†์ด๋„ state ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋ฌธ๋ฒ•์ด๋‹ค.

๐Ÿค Context ๋ฌธ๋ฒ• ์‚ฌ์šฉํ•˜๊ธฐ 1

let leftAllContext = React.createContext();
  • ์ผ๋‹จ ๊ฐ™์€ state ๊ฐ’์„ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์œผ๋ฉด context ๋ถ€ํ„ฐ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.
  • ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์€ ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด createContext() ๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ Component ์˜ ์™ธ๋ถ€์— ๋งŒ๋“ค์–ด์ฃผ๋ฉด ๋œ๋‹ค.
    (๋‚˜๋Š” ํŒŒ์ผ ์ตœ์ƒ๋‹จ์˜ import ์ฝ”๋“œ๊ฐ€ ์ ํ˜€์žˆ๋Š” ๊ณณ ๋ฐ”๋กœ ์•„๋ž˜์— ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค.)
  • ๊ทธ๋Ÿฌ๋ฉด ์ด์ œ ๋งŒ๋“ค์–ด์ง„ ๋ณ€์ˆ˜๊ฐ€ ๋ฐ”๋กœ ํŠน๋ณ„ํ•œ Component ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿค Context ๋ฌธ๋ฒ• ์‚ฌ์šฉํ•˜๊ธฐ 2

  <Route path='/detail/:id'>
    <leftAllContext.Provider value={leftAll}>
      <Detail shoes={shoes} setShoes={setShoes} leftAll={leftAll} setLeftAll={setLeftAll}/>
    </leftAllContext.Provider>
  </Route>
  • ๋ฐฉ๊ธˆ ๋งŒ๋“ค์–ด์ค€ Component ๋กœ state ์˜ ๊ฐ’์„ ๊ณต์œ ํ•˜๊ณ ์ž ํ•˜๋Š” Component ๋“ค์„ <๋ณ€์ˆ˜๋ช….Provider></๋ณ€์ˆ˜๋ช….Provider> ๋กœ ์ „๋ถ€ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.
  • ์ด๋ ‡๊ฒŒ ๊ฐ์‹ธ์ค€ ๋ถ€๋ถ„๋“ค์€ state ๊ฐ’์„ ๊ณต์œ ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฒ”์œ„๊ฐ€ ๋œ๋‹ค.
  • ์ด์ œ value ๋ผ๋Š” ์†์„ฑ์— state ์ด๋ฆ„์„ value={state์ด๋ฆ„} ์˜ ํ˜•์‹์œผ๋กœ ์ง‘์–ด๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.
  • ๊ทธ๋ž˜์„œ ์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด <๋ณ€์ˆ˜๋ช….Provider></๋ณ€์ˆ˜๋ช….Provider> ๋กœ ๊ฐ์‹ผ ๋ชจ๋“  HTML ๋ฐ Component ๋Š” ๋ณต์žกํ•˜๊ฒŒ props ์ „์†ก์„ ํ•˜์ง€ ์•Š๊ณ ๋„ leftAll ์ด๋ผ๋Š” state ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„๊ฐ€ ๋œ ๊ฒƒ์ด๋‹ค.

๐Ÿค Context ๋ฌธ๋ฒ• ์‚ฌ์šฉํ•˜๊ธฐ 3

// ์ „์ฒด ์ฝ”๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ์ฝ”๋“œ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๊ธธ์–ด์„œ ๋ถˆํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ์ œ์™ธํ–ˆ๋‹ค.

import React, { useEffect, useState, useContext } from "react";
import {leftAllContext} from './App.js'

function Detail(props) {

  let leftAll = useContext(leftAllContext);

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-7">
          <img src={`https://codingapple1.github.io/shop/shoes${parseInt(findId.id)+1}.jpg`} width="100%"/>
        </div>
        <div className="col-md-5 mt-4">
          <h4 className="pt-5">{findId.title}</h4>
          <p>{findId.content}</p>
          <p>{findId.price}</p>
          <LeftInfo leftOne={leftAll[findId.id]}/>
          <button className="btn btn-danger mx-1" onClick={()=>{changeLeftAll(props, findId.id)}}>์ฃผ๋ฌธํ•˜๊ธฐ</button> 
          <button className="btn btn-danger mx-1" onClick={()=>{history.goBack()}}>๋’ค๋กœ๊ฐ€๊ธฐ</button> 
        </div>
      </div>
    </div>
  )
}
  • ์ด์ œ leftAll ์ด๋ผ๋Š” state ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ๋ฉด useContext() ๋ผ๋Š” Hook ์„ ์ด์šฉํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” Context ๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค.

 

// createContext() ํ•œ App.js ํŒŒ์ผ์—์„œ export ํ•ด์ฃผ๊ธฐ
// ๊ธฐ์กด์— ๋งŒ๋“ค์—ˆ๋˜ ์ฝ”๋“œ ์•ž๋ถ€๋ถ„์— export ๋งŒ ๋ถ™์—ฌ์ฃผ๋ฉด ๋œ๋‹ค.
export let leftAllContext = React.createContext();

// useContext() ํ•  Detail.js ํŒŒ์ผ๋กœ import ํ•ด์ฃผ๊ธฐ
import {leftAllContext} from './App.js'
  • ๊ฐ™์€ ํŒŒ์ผ ๋‚ด์—์„œ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์œ„์™€ ๊ฐ™์ด export / import ํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”์—†์ง€๋งŒ, ๋‚˜์˜ ๊ฒฝ์šฐ ํŒŒ์ผ์„ ๋ชจ๋‘ ๋ถ„๋ฆฌ์‹œ์ผœ๋‘์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์ด ๊ฐ ํŒŒ์ผ์˜ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ • ๋ฐ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค.
  • ๋งŒ์•ฝ ๊นœ๋นกํ•˜๊ณ  export / import ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด ๋ณ€์ˆ˜๋ช…context is not defined ์™€ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค.
  • export ํ•  ํŒŒ์ผ์—์„œ๋Š” ๊ธฐ์กด์— ์ž‘์„ฑํ•œ ์ฝ”๋“œ์˜ ์•ž๋ถ€๋ถ„์— export ๋งŒ ๋ถ™์—ฌ์ฃผ๋ฉด ๋˜๊ณ , import ํ•  ํŒŒ์ผ์—์„œ๋Š” useState() ๋ฅผ import ํ•  ๋•Œ์ฒ˜๋Ÿผ ๊ฒฝ๋กœ์™€ ํ•จ๊ป˜ ์ค‘๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ import ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
  • ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๊ณ  ๋‚˜๋ฉด ๊ธฐ์กด์— props ๋กœ ๋ฐ›์•„์™”๋˜ Detail Component ๋‚ด์˜ props.leftAll ์„ leftAll ๋กœ ๋ฐ”๊พธ์–ด๋„ ๋ฌธ์ œ ์—†์ด ๊ธฐ๋Šฅ๋“ค์ด ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜๋ผ ์ˆ˜ ์žˆ๋‹ค.

 

 

728x90
๋ฐ˜์‘ํ˜•