Component
ํ์ต ํค์๋
React Component
ํด๋์คํ ์ปดํฌ๋ํธ vs ํจ์ํ ์ปดํฌ๋ํธ
Component ๊ณ์ธต ๊ตฌ์กฐ
SRP(๋จ์ผ ์ฑ ์ ์์น)
ํจ์ ์ถ์ถํ๋ ๋ฐฉ์ : Extract Function / Inline Function
๋์์ธ ์์คํ : Atomic Design
React Component
๐ Component
๋?
Component
๋?๋ฆฌ์กํธ์์ ์ฑ์ ์ด๋ฃจ๋ ๊ฐ์ฅ ์์ ๋จ์
Component ์ค๊ณํ๊ณ ๋ง๋ Component ์กฐํฉํด์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)๋ฅผ ์ค๊ณํ๋ค.
Component ์๋ฐ์คํฌ๋ฆฝํธ์ ํจ์์ฒ๋ผ ์๋ํด์ react elements๋ฅผ ๋ฐํํ๋ค.
ํจ์ํ, ํด๋์คํ ์ปดํฌ๋ํธ ์กด์ฌํ๋ค.
์ปดํฌ๋ํธ์ ๊ตฌ์ฑ์์ : props, state, context
ํด๋์ค(Class) ์ปดํฌ๋ํธ vs ํจ์(Function) ์ปดํฌ๋ํธ
ํด๋์ค(Class) ์ปดํฌ๋ํธ
์๋ฐ์คํฌ๋ฆฝํธ์
ํด๋์ค(class)
๊ธฐ๋ฐ ์ปดํฌ๋ํธclass๋ก ์ ์ํ๊ณ return ๋ฌธ์ JSX ์ฝ๋๋ฅผ ๋ฐํ
React.Component ์์
React์ ComponentClass๋ฅผ ์์๋ฐ์ Component ์์ ํ์
render() ๋ฉ์๋ ํ์ ์ฌ์ฉ
this ํค์๋๋ก ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ์ฌ ์ฌ์ฉํ๋ค.
ํจ์(Function) ์ปดํฌ๋ํธ
์๋ฐ์คํฌ๋ฆฝํธ์
ํจ์(function)
๊ธฐ๋ฐ ์ปดํฌ๋ํธ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ฅผ ์ ์ธํ๋ฏ์ด function์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ๊ณ return ๋ฌธ์ JSX ์ฝ๋๋ฅผ ๋ฐํ
ํจ์ ์ ์ธ, ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํด์ ์์ฑํ๋ค.
์ง๊ด์ ์ธ ์ฝ๋ ์์ฑ์ด ๊ฐ๋ฅํ๊ณ , ๋ฉ๋ชจ๋ฆฌ ์์์ ์ ๊ฒ ์ฌ์ฉ๋๋ค.
โ๐ป ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉ ํด์ผ ํ๋ ์ด์ ๊ณผ๊ฑฐ์๋ ํจ์ํ ์ปดํฌ๋ํธ๊ฐ state, LifeCycle ์ ์ด ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ง์ํ์ง ์์๊ธฐ ๋๋ฌธ์ ํด๋์ค(Class)๊ธฐ๋ฐ ์ปดํฌ๋ํธ๋ฅผ ๋ง์ด ์ฌ์ฉํ์ง๋ง, React v16.8 ์ดํ
Hooks
๋ฅผ ํตํ state ๋ฐ LifeCycle ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ฏ๋ก ๊ณต์์ ์ผ๋ก ํจ์ํ ์ปดํฌ๋ํธ ์ฌ์ฉ์ ๊ถ์ฅํ๋ค.
๐ ์ฐธ๊ณ
Component ๊ณ์ธต ๊ตฌ์กฐ
Component๋ฅผ ์ด๋ป๊ฒ ๋๋ ๊ฒ์ธ๊ฐ? ๋ค์ํ ๋ฐฉ์์ผ๋ก ๋ถ๋ฆฌ ๊ธฐ์ค์ ์ ๊ณ ๋ ค ํ ์ ์๋ค.
๋จ์ผ ์ฑ
์ ์์น (Single Responsibility Principle)
๋จ์ผ ์ฑ ์ ์์น ๋ชจ๋ ํด๋์ค๋ ํ๋์ ์ฑ ์๋ง ๊ฐ์ง๋ฉฐ, ํด๋์ค๋ ๊ทธ ์ฑ ์์ ์์ ํ ์บก์ํํด์ผ ํ๋ค.
ํ๋์ ์ปดํฌ๋ํธ๋ ํ๊ฐ์ง ์ผ์ ํ๋๊ฒ ์ด์์ ์ด๋ค.
๋ชจ๋ ํจ์, ์ปดํฌ๋ํธ ๋ฑ์ ์ ํํ ํ๊ฐ์ง ์์ ์ ์ํ ํด์ผํ๋ ์ฑ ์์ ๋ฐ๋ผ ์ปดํฌ๋ํธ ๋ถ๋ฆฌ
๋๋ฌด ๋ง์ ์์ ์ ์ํํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌ
์ฃผ์ ์ปดํฌ๋ํธ ๊ธฐ๋ฅ๊ณผ ๊ด๋ จ ์๋ ํจ์๋ ๋ณ๋์ until๋ก ์ถ์ถ
์ฐ๊ฒฐ๋ ๊ธฐ๋ฅ์ custom hook ๋ฑ์ผ๋ก ์บก์ํ
ํจ์ ์ถ์ถ ๋ฐฉ์ : Extract Function / Inline Function
์ฝ๋ ์กฐ๊ฐ์ ์ฐพ์ ๋ฌด์จ ์ผ์ ํ๋์ง ํ์ ํ ๋ค์, ๋ ๋ฆฝ๋ ํจ์๋ก ์ถ์ถํ๊ณ ๋ชฉ์ ์ ๋ง์ ์ด๋ฆ์ ๋ถํ๋ค. by ๋งํด ํ์ธ๋ฌ
๋ฆฌํฉํ ๋ง์์ ์ธ ์ ์๋ ๊ธฐ๋ฒ
ํจ์ ์ถ์ถ์ ๋จ์ผ ์ฑ ์ ์์น์ ์ํด ์ฐ์ด๋ ๋ฐฉ๋ฒ ์ค ํ๋
CSS
css ํด๋์ค ์ ํ์๋ฅผ ๊ณ ๋ ค ํ ๋์ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ ๋ถ๋ฆฌ
Designโs Layer (๋์์ธ ์ธก๋ฉด)
๋์์ธ ์์์ ํ์ธ์ ๋ ์ด์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ ๋ถ๋ฆฌ
Atomic Design ๋์์ธ ์์คํ
์น๋์์ธ๊ณผ ๊ฐ๋ฐ ๋ถ์ผ๋ ์ง์์ ์ผ๋ก ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ๊ณ ์๋ค. ๋์์ธ๊ณผ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ ์ด์ ๊ฐ๋จํ ํ์ด์ง ๋ ์ด์์์ ๋์ด์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ ์์คํ ์ ํ์๋ก ํ๊ฒ ๋์๋ค. ์ด๋ฐํ ๋ณต์กํ ๋ฌธ์ ์ ๋์ํ๊ธฐ ์ํ์ฌ ๋์์ธ์์คํ ๊ณผ ํจํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ์์ฑ์ด ์๊ฒจ๋ฌ๋ค.
ํํ์ ๊ด์ ์์ ์๊ฐ์ ์ป์ ๋์์ธ ์์คํ
Atoms(์์) -> Molecules(๋ถ์) -> Organisms(์ ๊ธฐ์ฒด) -> Templates -> Pages ์์ผ๋ก ์์ ๊ฒ๋ค์ ๋ง๋ค๊ณ , ๊ฒฐํฉํด ์ข ๋ ํฐ ๋จ์์ ๋ทฐ๋ฅผ ๋ง๋ค์ด ๋๊ฐ๋ ๋์์ธ ์์คํ
์์ UI ์์๋ถํฐ ์์ํ์ฌ ์ ์ฐจ ํฐ ๋จ์์ UI ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด๊ฐ๋ ๋ฐฉ์์ ์ ์ํ๋ ๋์์ธ ํจํด ์ผ๋ก ์ปดํฌ๋ํธ ๋ถ๋ฆฌ

Information Architecture ( ์ ๋ณด ๊ตฌ์กฐ๋ )
์น/์ฑ ๊ตฌ์ถ ์ ํ์ํ ํ๋ฉด๊ณผ ๋ฉ๋ด์ ์ ๋ณด ๊ตฌ์กฐ๋ฅผ ์ค๊ณ ๋ฐ ์ ์ํ๋ ๋ฌธ์ ์ ๋ณด์ ๊ตฌํธํ๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ํ๋ฉด์ ๋ง์ฃผํ๊ธฐ๊น์ง ํ์ํ ํ๋ฉด๋ค์ ํ๋ฆ์ ์๊ฐํํ์ฌ ๋ํ๋ธ๋ค.
JSON Schema์ ์ํฅ์ผ๋ก ํ๋ฉด ์ค๊ณ์ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ ๋ถ๋ฆฌ
๐ ์ฐธ๊ณ
Last updated