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
๋ฐ์ํ
'[๊ฐ๋ฐ] Practice > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] props ๋์ redux ์ฌ์ฉํด๋ณด๊ธฐ (0) | 2022.03.28 |
---|---|
[React] Tab ๋ง๋ค๊ณ ์ ๋๋ฉ์ด์ ์ถ๊ฐํ๊ธฐ (0) | 2022.03.27 |
[React] ์์ธ ํ์ด์ง์ ์ฌ๊ณ ๋ฐ์ดํฐ ํ์ํ๊ธฐ (0) | 2022.03.26 |
[React] React ์์ Ajax ์์ฒญํ๊ธฐ_2 (1) | 2022.03.26 |
[React] React ์์ Ajax ์์ฒญํ๊ธฐ (0) | 2022.03.26 |