Concepts
Nesting components
๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ๋ค์ ์งํฉ์ฒด์ด๋ค. ์ปดํฌ๋ํธ๋ผ ํ๋ฉด UI(User Interface)๋ก ์์ ์ ๋ก์ง๊ณผ ์คํ์ผ์ ๊ฐ๊ณ ์๋ค. ์๋ฅผ ๋ค๋ฉด ์์ฃผ ์์ ๋จ์์ ๋ฒํผ๋ถํฐ ํ๋์ ํ์ด์ง๊น์ง ๋ค์ํ๋ค.
-> Atomic design system๊ณผ ์ ๋ถํฉํ๋ ๊ฒ ๊ฐ๋ค. 1)
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉฐ ๋งํฌ์ ์ ๋ฐํํ๋ค. ๋ํ, HTML ํ๊ทธ์ ๊ตฌ๋ถํ ์ ์๋๋ก ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ๋๋ฌธ์๋ฅผ ์ฌ์ฉํ๋ค.
// JSX ๋ด { } escape ๋ฌธ์๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ค์ ๋ฃ์ ์ ์๋ค.
const Button = ({onClick}) => {
return (
<button onClick={onClick}></button>
)
}
// export default ํค์๋๋ ํ์ผ ๋ด ๋ฉ์ธ์ผ๋ก ๋ฐํํ ๊ฒ์ ์๋ฏธํ๋ค.
export default const Page = () => {
const onClick = () => {
...
}
return (
<>
<h1>Payment</h1>
<Button onClick={onClick}/>
</>
)
}
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ๊ฐ์ JSX ํ๊ทธ๋ฅผ ๋ฐํํ ์ ์๊ณ ํ๋์ ๊ฐ์ธ์ง JSX ํ๊ทธ๋ง์ ๋ฐํํ ์ ์๋ค.
๊ตฌ์ฒด์ ์ผ๋ก ์ ํด์ง ๋ฐ๋ ์์ง๋ง ๊ฐ์ฅ ์ฝ๊ฒ className
์ ํตํด ์คํ์ผ๋ง ํ ์ ์๋ค.
๋ฆฌ์กํธ์์๋ if
๋ฅผ ์ฌ์ฉํด ๋ ๋๋ง ๋ถ๊ธฐ์ฒ๋ฆฌ ํ ์ ์๋ค.
const Input = ({isLoggedIn, username}) => {
const content = isLoggedIn ? <Admin /> : <Login />
return(
<div>
{content}
{username && (
<span>{username}</span>
)}
</div>
)
}
Managing State
Last updated