์ปดํฌ๋ํธ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ด๋ํ๋ ์๋จ
Props
๋ Read Only๋ก ์ฝ๊ธฐ๋ง ์ํ ๊ฐ๋ฅํ๋ฏ๋ก ๋ณ๊ฒฝ์ด ๋ถ๊ฐ๋ฅํ๋ค.
์ง๋ ๊ฐ์์ ์ฌ์ฉํ๋ ์ฝ๋๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ธ๊ณ ์๊ฐ์ ๋ณด์ฌ์ฃผ๋ ์ฑ์ ์ ์ํด๋ณด๊ฒ ์ต๋๋ค.
์ปดํฌ๋ํธ๋ ์๋์ ๊ฐ์ด ํจ์๋ฅผ ์ด์ฉํด์ ์์ฑํ ์ ์๋ค.
const WorldClock = props => {
return <div></div>;
};
์์ ์ปดํฌ๋ํธ๋ WorldClock
์ด๋ผ๋ ์ด๋ฆ์ ๊ฐ๊ณ props
๋ฅผ ์ธ์๋ก ๋ฐ๋ ์ปดํฌ๋ํธ๋ค.
์๋์ ์ปดํฌ๋ํธ๋ props
๋ฅผ ํตํด์ ๋์์ ์ด๋ฆ๊ณผ ์๊ฐ์ด ์ ๋ฌ๋๋ค๊ณ ๊ฐ์ ํ ์ปดํฌ๋ํธ๋ค.
const WorldClock = props => {
return (
<div className="WorldClock">
<h2>๐ {props.city}</h2>
<p>โฐ {props.time}</p>
</div>
);
};
์์ ๊ฐ์ด ์์ฑํ ํ ์ฝ์์ ํ์ธํ๊ฒ ๋๋ฉด ์๋์ ๊ฒฝ๊ณ ๋ค์ ํ์ธํ ์ ์๋ค.
์ฐ๋ฆฌ๊ฐ ์์ฑํ WorldClock
์ด ์์ง ์ฌ์ฉ๋์ง ์์๋ค๋ ๊ฒฝ๊ณ ์
์ด๋ชจ์ง๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ span
ํ๊ทธ์ role
์์ฑ๊ณผ aria-label
์์ฑ์ ์ถ๊ฐํ๋ผ๋ ๊ฒฝ๊ณ ๋ค.
์๋์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ ํ๋ฉด ์ด๋ชจ์ง์ ๊ด๋ จ๋ ๊ฒฝ๊ณ ๋ ์ฌ๋ผ์ง๊ฒ ๋๋ค.
const WorldClock = props => {
return (
<div className="WorldClock">
<h2>
<span role="img" aria-label="Earth Emoji">
๐
</span>{" "}
{props.city}
</h2>
<p>
<span role="img" aria-label="Clock Emoji">
โฐ
</span>{" "}
{props.time}
</p>
</div>
);
};
์์ฑํ WorldClock
์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ App
ํจ์๋ฅผ ์๋์ ๊ฐ์ด ๋ณ๊ฒฝํ๋ฉด ๋๋ค.
function App() {
return (
<div className="App">
<h1 style={headerStyle}>Hello World!</h1>
<h2 className={"titleStyle"}>ReactJS ๋๋ฌ๋ณด๊ธฐ</h2>
<WorldClock city="์์ธ" time="10:00" />
</div>
);
}
WorldClock
์ปดํฌ๋ํธ์ city
์ ์์ธ์ด๋ผ๋ ๊ฐ์ ๋๊ฒจ์ฃผ๊ณ time
์ 10:00์ ๋๊ฒจ ์ฃผ์๋ค.
WorldClock
์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด์ ๋ชจ๋ ๊ฒฝ๊ณ ๊ฐ ์ฌ๋ผ์ง๊ณ ์๋์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๋ค.
์ฐ๋ฆฌ๊ฐ ์ ๋ฌํ props
๊ฐ WorldClock
์ปดํฌ๋ํธ์ ์ ์ ๋ฌ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ปดํฌ๋ํธ ๊ฐ์ ์ฝ๊ฐ์ ๊ตฌ๋ถ์ ๋๊ธฐ ์ํด App.css
์ ์๋์ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ค.
.WorldClock {
border: 1px solid black;
width: 500px;
margin: 0 auto 10px auto;
}
์ฐ๋ฆฌ๊ฐ ์ง์ ํ ์คํ์ผ์ด ์ ์ ์ฉ๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ธ๊ณ ์๊ฐ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋ชฉ์ ์ผ๋ก ํ๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ๊ฐ์ ๋์๋ฅผ ์ถ๋ ฅํด๋ณด์.
App.js
์ App
ํจ์๋ฅผ ์๋์ ๊ฐ์ด ์์ ํ๋ฉด ๋๋ค.
function App() {
return (
<div className="App">
<h1 style={headerStyle}>Hello World!</h1>
<h2 className={"titleStyle"}>ReactJS ๋๋ฌ๋ณด๊ธฐ</h2>
<WorldClock city="์์ธ" time="10:00" />
<WorldClock city="๋ฒ ์ด์ง" time="09:00" />
<WorldClock city="์๋๋" time="12:00" />
<WorldClock city="LA" time="17:00" />
</div>
);
}
์ถ๊ฐํ 3๊ฐ์ WorldClock
์ปดํฌ๋ํธ ๋ํ ์ ๋ณด์ฌ์ง๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
WorldClock
์ปดํฌ๋ํธ์์ city
์ time
์์ฑ์ด props
๋ก ์ฌ์ฉ๋์ด์ง๊ณ ์์ผ๋ฉฐ
๊ฐ๊ฐ ๋ค๋ฅธ ๋ฐ์ดํฐ๊ฐ WorldClock
์ปดํฌ๋ํธ์ props
๋ก ๋์ด๊ฐ ์ถ๋ ฅ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.