๋ชฉ์ฐจ
์ด์ ๊ธ โผ
0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ
1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX
2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object)
2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ)
3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component)
4. 2023.05.28 - [๐ | WEB DEV/React] - [React] 4. ๋์ ์ธ UI ์ ์ํ๊ธฐ
5. 2023.05.28 - [๐ | WEB DEV/React] - [React] 5. ๋ฐ๋ณต๋๋ ๋ถ๋ถ ์ถ์ฝํ๊ธฐ (map)
์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์์๋ App(){} ๋ด๋ถ์์ ์ ์ํ state๋ ์ฌ๋ ค ๋ณ์ ๋ฑ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ๊ฐ ์๋ค.
์ด๋ฅผ ์ํด์๋ props๋ฅผ ์ฌ์ฉํด์ผํ๋ค.
1. props ์์๋ณด๊ธฐ
๋จผ์ App๊ณผ ์ปดํฌ๋ํธ์ ์์น๋ฅผ ์ดํด๋ณด์.
function App(){
let [foo, setFoo] = useState(0)
return(
<>
<์ปดํฌ๋ํธ/>
</>
)
}
function ์ปดํฌ๋ํธ(){
return(
<>
...
</>
)
}
์์ฒ๋ผ ๋ ์ปดํฌ๋ํธ ์ ์ ํจ์๋ ํ์ ์์น์ ์กด์ฌํ๋ค.
JS์ ์์ญ ๊ฐ๋ ์ ์ฃผ๋ชฉ์ ํ์์ ๋
ํ์ ์์น์ ์กด์ฌํ๋ ์๋ก ๋ค๋ฅธ ํจ์ ๋ด ๋ฐ์ดํฐ๋
์ก์์ ์ด ๋ถ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์
์ฆ, functoin App์ ๋ด๋ถ์ ์กด์ฌํ๋ ๋ณ์, state ๋ฑ์
์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก ์ ์ํ funcion ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์ ์๋ค.
ํ์ง๋ง ๋ค์ ์์ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด
html๋ก ๋ ๋๋งํ ๋์๋
<App> <์ปดํฌ๋ํธ/> </App> ์ ํํ์ด๋ฏ๋ก
App์ด ๋ถ๋ชจ, ์ปดํฌ๋ํธ๊ฐ ์์์ธ ๊ด๊ณ์ด๋ค.
์ด๋์๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ์์ ์ปดํฌ๋ํธ๋ก ์ ์กํด์ค ์ ์๋๋ฐ
์ด๊ฒ์ ๊ฐ๋ฅํ๊ฒ ํด์ฃผ๋ ๊ฒ์ด ๋ฐ๋ก props ๋ฌธ๋ฒ์ด๋ค.
2. props ํ์ฉํ๊ธฐ
๋จ๊ณ
1. ์์ ์ปดํฌ๋ํธ ํ๊ทธ ์กฐ์
2. ์์ ์ปดํฌ๋ํธ function ์กฐ์
1) ์์ ์ปดํฌ๋ํธ ํ๊ทธ ์กฐ์
์์ ์ปดํฌ๋ํธ์ ํ๊ทธ์
" props๋ช = ๋ฐ์ดํฐ "์ ํํ๋ก ์ ์ด์ค๋ค.
์ด๋ ๋ฐ์ดํฐ๋ก ๋ณ์, state ๋ฑ์ ์ ๋ฌํ ๋์๋ {๋ณ์ ๋ช }, {satate ๋ช }๊ณผ ๊ฐ์ ํํ๋ก ์ ๋ฌํ๋ค.
๋ํ ์ผ๋ฐ ๋ฌธ์์ด์ ๊ฒฝ์ฐ "๋ฌธ์์ด"๋ก ์ ์กํ๋ฉด๋๋ค.
์์
function App() {
let [music, setMusic] = useState({"title": ... , ...})
return(
<div>
<Modal music={music}/>
</div>
)
}
2) ์์ ์ปดํฌ๋ํธ function ์กฐ์
์์ ์ปดํฌ๋ํธ function์ props๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ์ง์ ํ๋ค.
์ด๋ ํ๋ผ๋ฏธํฐ์ ์ด๋ฆ์ ์์๋ก ์ง์ ํ์ฌ๋ ๋ฌด๊ดํ๋ค.
์์
function Modal(props){
return(
<div className="modal-container">
...
<div className="modal-title">{props.title}</div>
...
</div>
)
}
์์ ์์์์ ๋ณผ ์ ์๋ฏ, props ๋ฌธ๋ฒ์ ํจ์์ ํ๋ผ๋ฏธํฐ ๊ทธ ์์ฒด์ด๋ค.
๋ฐ๋ผ์ ๊ฐ์ฒด state๋ฅผ ์ ๋ฌ๋ฐ์์ ๋ ๋ด๋ถ ์์์ ์ ๊ทผํ๋ ๊ฒ ๋ํ ๊ฐ๋ฅํ๋ค.
3. props๋ก ์ฌ๋ฌ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ๋
props๋ก ์ฌ๋ฌ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค.
<์ปดํฌ๋ํธ props๋ช = ๋ฐ์ดํฐ, props๋ช 2 = ๋ฐ์ดํฐ >์ ๊ฐ์ด
๋ณด๋ผ props๋ค์ ๋์ดํ๋ฉด ๋๋ค.
์ ์ก๋ ๋ฐ์ดํฐ๋ฅผ ์ปดํฌ๋ํธ function์์ ๋งค๊ฐ๋ณ์๋ก ๋ฑ๋กํ ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋ค.
1) ๋ฐ๋ก ๋ฐ๋ก ๋ฐ๊ธฐ
props๋ฅผ ํ๋์ฉ ๊ทธ๋๋ก ๋ฐ์์ค๊ธฐ ์ํด์๋
์์ ์ปดํฌ๋ํธ ํ๊ทธ์์ ์ ์ํ props๋ช ์
์์ ์ปดํฌ๋ํธ function์ ํ๋ผ๋ฏธํฐ๋ก ์ค๊ดํธ{ }๋ก ๊ฐ์ผ ํํ๋ก ๋์ดํ์ฌ ๋ฑ๋กํ๋ฉด๋๋ค. (์์ ๋ฌด๊ด)
์์
function App(){
return(
...
<์ปดํฌ๋ํธ data1="1" data2="Hello" />
...
)
}
function ์ปดํฌ๋ํธ({data1, data2}){
return(
<div>
<div>{data1}</div>
<div>{data2}</div>
</div>
)
}
2) ํ ๋ฒ์ ๋ฐ๊ธฐ
ํ๋์ ํ๋ผ๋ฏธํฐ๋ง ๋ฑ๋กํ์ฌ๋ ์ฌ๋ฌ props๋ค์ ์ ๋ฌ๋ฐ์ ์ ์๋ค.
์ด๋๋ ์ ๋ฌ๋ฐ์ ๋ฐ์ดํฐ๋ค์ด ๊ฐ์ฒด์ ํํ๋ก ์ ์ฅ๋์ด ์๋ค.
์์
function App(){
return(
...
<์ปดํฌ๋ํธ data1="1" data2="Hello" />
...
)
}
// props๋ {"data1":1, "data2":"Hello}์ ํํ๋ก ์ ์ฅ๋์ด์๋ค.
function ์ปดํฌ๋ํธ(props){
return(
<div>
<div>{props.data1}</div>
<div>{props.data2}</div>
</div>
)
}
๊ฒฐ๊ณผํ๋ฉด (๋ ๋ฐฉ๋ฒ ๋์ผํ ๊ฒฐ๊ณผ)
'๐ | WEB DEV > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] 7. ์ด๋ฏธ์ง ์ฝ์ ํ๊ธฐ(css, html, publicํด๋์์ ๊ฐ์ ธ์ค๊ธฐ) (0) | 2023.07.03 |
---|---|
[React] CORS ์๋ฌ ํด๊ฒฐํ๊ธฐ (http-proxy-middleware) (0) | 2023.06.30 |
[React] 5. ๋ฐ๋ณต๋๋ ๋ถ๋ถ ์ถ์ฝํ๊ธฐ (map) (0) | 2023.05.28 |
[React] 4. ๋์ ์ธ UI ์ ์ํ๊ธฐ (0) | 2023.05.28 |
[React] 3. ์ปดํฌ๋ํธ (Component) (0) | 2023.05.28 |
๋๊ธ