React๋ฅผ ์ฒ์ ์์ํ๋ ์ฌ๋๋ค ๋๋ React์ ๊ฒฝํ์ด ๋ง์ง ์์ ์ฌ๋๋ค์๊ฒ ๋น์ทํด๋ณด์ฌ์ ์ด๋ ต๊ฒ ๋๊ปด์ง ์ ์๋ React Props์ React State์ ๋ํด ์ฐจ์ด์ ์ ๋ํ ํฌ์คํ
์ ํ๋ ค๊ณ ํ์ง๋ง React์ Props๋ฅผ ๋จผ์ ์ดํดํด์ผ state์ ๋ํด ์ดํดํ๊ธฐ ๋์ฑ ์ฌ์ธ ๊ฒ ๊ฐ์, props์ ๋ํด ๋จผ์ ์์๋ณด๋ ค ํ๋ค.
props์ state๋ React์ ํด๋์ค ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ์์ ๋ชจ๋ ์ฌ์ฉ๋๋ค.
Props
React์์ props๋ "properties"์ ์ค์๋ง๋ก, ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ผ๋ก, ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์๊ฒ ์ ๋ฌํ๋ ๋ฐ์ดํฐ๋ props๋ผ๋ ๊ฐ์ฒด ํํ๋ก ์ ๋ฌ๋๋ฉฐ, ์์ ์ปดํฌ๋ํธ๋ ์ด props ๊ฐ์ฒด๋ฅผ ํตํด ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์์ผ๋ฉฐ, ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง ํ๋์ props(์์ฑ์ ๋ํ๋ด๋ ๋ฐ์ดํฐ) ๊ฐ์ฒด ์ธ์๋ฅผ ๋ฐ์ ์ ์๋ค.
์์ ๋ฅผ ํตํด props์ ๋ํด์ ์ค๋ช ์ ํ์๋ฉด,
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
์๋์ ๊ฐ์ด Welcome์ด๋ผ๋ ํจ์ ์ปดํฌ๋ํธ๊ฐ ์กด์ฌํ๋ค๊ณ ํ ๋, Welcome์ ์ค๋ฅธ์ชฝ ๊ดํธ ์ ์ธ์(props)๊ฐ Welcome ์ปดํฌ๋ํธ์ props(์์ฑ์ ๋ํ๋ด๋ ๋ฐ์ดํฐ)๊ฐ์ฒด ์ธ์์ด๊ณ , Welcome ์ปดํฌ๋ํธ๋ ์ธ์๋ก ์ ๋ฌ๋ฐ์ props ๊ฐ์ฒด๋ฅผ React ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํ๊ณ ์๋ค.
Welcome ์ปดํฌ๋ํธ๋ props๋ฅผ ์ ๋ฌ๋ฐ๊ณ , React ์๋ฆฌ๋จผํธ (h1 ํํ)๋ก "Hello, {props.name}"์ ์ถ๋ ฅํ๋ ํํ์ด๋ค.
๊ทธ๋์ Welcome ์ปดํฌ๋ํธ๋ props๋ก ๋ฐ์ ๊ฐ์ฒด์ name์ด๋ผ๋ ํค์ ๊ฐ์ ๋ฆฌ์กํธ ์๋ฆฌ๋จผํธ์์์ ๋ ๋๋ง ํ๋ค.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
์ด ์์ ์ฝ๋๋ ํ๋ฉด์ ์๋์ ๊ฐ์ด ๋ ๋๋งํ๋ค.
"Hello, Sara"
"Hello, Cahal"
"Hello, Edite"
์ด๋ ๊ฒ React์์ Props๋ ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํ ๋งค์ฐ ์ค์ํ ๊ฐ๋ ์ด๋ฉฐ, React์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ๊ณ ์ ์ฐํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ์ ํ์์ ์ธ ์์์ด๋ค.
๐ธ ์ถ์ฒ ๐ธ
Components์ Props - react.org
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ Next.js ] Next13์ ์ฃผ์ ๊ธฐ๋ฅ์ ๋ํด ์์๋ณด์. (0) | 2023.06.05 |
---|---|
[ React ] ์ํ ๊ด๋ฆฌ ํด ๋น๊ต ๋ถ์ Recoil vs Zustand (0) | 2023.05.21 |
[ webpack ] React(๋ฆฌ์กํธ)์ webpack(์นํฉ) (0) | 2023.03.05 |
[ React ] React Element ์ Component์ ์ฐจ์ด์ (0) | 2023.02.24 |
[ React / Next ] Web Google Login ๊ธฐ๋ฅ ๊ตฌํ (gsi/client) (0) | 2023.01.08 |