๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 30 ~ Sep 3, 2021
ํ์ฌ ์ํ
https://www.notion.so/wecode/React-f808df453fec45e494bd39d888d73530
<component์ component ์ฌ์ฌ์ฉ>
๊ณต์ ๋ฌธ์ ํ๋ ๋งํฌ
component๋ฅผ ์์์ ํํ์ด์ง ํ๋๋ฅผ ๋ง๋๋ ๊ฑฐ์ผ. ๊ทธ๋์ ์ค๊ณ๊ฐ ์ค์ํด.
ํ์ผ ์ค์ฒฉ ๋๋ฌด ๋ง์ด ํ์ง ๋ง๊ณ ์ต๋ 4๊ฐ ๋ฏธ๋ง์ผ๋ก ํด. ์๋ ๊ฒฝ๋ก๋ฅผ ํ๊ณ ๋ค์ด์ค๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ์ง ํ์ผ์ด ๋๋ฌด ๋ง์ด ์ค์ฒฉ๋๋ฉด react์์ ์ฒ๋ฆฌํ๋๊ฒ ๋ณต์กํด์ ธ.
(์ฐธ๊ณ )
๋์์ธ์์คํ
์ด ๊ตฌ์ถ๋์ด ์๋ ํ์ฌ ex ํ ์ค, ๋ฐฐ๋ฌ์๋ฏผ์กฑ, google materials
material-ui.com > component
(/)
์์ฑ , ๋ผ์ธํ๋ ์ฆ git clone ๋ฐ์์ ์ปดํฌ๋ํธ๋ ๊ธฐ๋ฅ ์ดํด๋ณด๊ณ ๋ด ํ๋ก์ ํธ์ ์ ์ฉํ๊ธฐ
๋งํฌ account ๋ถ๋ถ
๊ทธ๋ ๋ค๊ณ ์ ๋ถ ๋ค component๋ก ๋ง๋๋ ๊ฒ ์๋๋ผ props๋ก ๋ฌ๋ฆฌ ํ์ํด ์ฃผ๊ณ ์ถ์ ๊ฐ๋ค์ component์ ๋๊ฒจ์ ํ๋์ component๋ก ์ฌ๋ฌ ๊ฐ์ง ํํ๋ฅผ ์ฌ์ฉํ ์ ์์ด
// before -> ๋ ๊ฐ์ ๋ด์ฉ์ ํํํ๊ธฐ ์ํ ๋ ๊ฐ์ ์ปดํฌ๋ํธ
isMyID ? <ProfileMyID /> : <ProfileOtherID />
// after -> ๋ ๊ฐ์ ๋ด์ฉ์ ํํํ๊ธฐ ์ํ ํ๋์ ์ปดํฌ๋ํธ
const MY_ID = 'mine'
const OTHER_ID = 'others'
isMyID ? <Profile userID={MY_ID} /> : <Profile userID={OTHER_ID} />```
์ปดํฌ๋ํธ ๋ฏธ๋ฆฌ ๋นผ๋๋ผ์
์ปดํฌ๋ํธ๋ js ํ์ผ์ css ํ์ผ๊น์ง ๊ฐ์ด ์ด๋ค์
this.props.children
https://ko.reactjs.org/docs/glossary.html#propschildren
์ฌ๋ฌ ๊ฐ๊ฐ ๋ค์ด๊ฐ๊ณ , ๊ทธ ์์ชฝ์ ๊ฐ๊ฐ ์์๋ค์ด ๋ค์ด์๋ ๊ฑด? ๋ฐฐ์ด์ด์์.
๊ทธ๋์ ์ฐ๋ฆฌ๊ฐ map ๋๋ฆฌ๋ฉด returnํ ๋ ๋ฐฐ์ด๋ก ๋ฐํ๋ผ.
ํ๊ทธ๋ ์ด๋ ๊ฒ ๋ฐฐ์ด๋ก ํํํ ์ ์๊ณ , ํ์ ํ๊ทธ๋ฅผ children์ผ๋ก ํํํ ์ ์์ด.
component๊ฐ ๊ฐ์ธ๊ณ ์๊ณ , ์์ ๊ตฌ๋ฉ์ด ๋ฟ
๋ฟ
๋ซ๋ ค์์ด์ ๊ฑฐ๊ธฐ์ children์ ๋ฃ์ด์ ์ด๋ค๊ณ ์๊ฐํด.