react - Learn React(Describing the UI)
๐ React
์ด ๊ธ์ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์ - ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ฝ๊ณ ์์ฑํ ๊ธ์ ๋๋ค. ๋ชจ๋ ๋ด์ฉ์ ๋ค๋ฃจ์ง๋ ์๊ณ ๊ฐ์ธ์ ์ผ๋ก ๋ถ์กฑํ๋ค๊ณ ๋๊ผ๋ ๋ถ๋ถ, ์๋กญ๊ฒ ์๊ฒ ๋ ๋ถ๋ถ๋ค์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํ ์์ ์ ๋๋ค.
Learn React - Describing the UI
๋ฆฌ์กํธ๋ UI(User Interface)๋ฅผ ๋ ๋๋งํ๊ธฐ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. UI๋ ๋ฒํผ, ํ ์คํธ ๊ทธ๋ฆฌ๊ณ ์ด๋ฏธ์ง๋ค๊ณผ ๊ฐ์ ์์ ๋จ์๋ก๋ถํฐ ๊ตฌ์ฑ๋๋ค. ๋ฆฌ์กํธ๋ ๊ทธ ์์ ๋จ์๋ค์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ , ์ค์ฒฉ ๊ฐ๋ฅํ๊ฒ ๊ฒฐํฉํ ์ ์๊ฒ ํด์ค๋ค. ์น ์ฌ์ดํธ์์๋ถํฐ ํฐ ์ฑ๋ค๊น์ง ํ๋ฉด์ ์๋ ๋ชจ๋ ๊ฒ๋ค์ ์ปดํฌ๋ํธ๋ก ๋ถํดํ ์ ์๋ค. ์ด๋ฒ ์ฑํฐ์์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ค์ ๋ง๋ค๊ณ , ์ปค์คํฐ๋ง์ด์ฆํ๊ณ ์กฐ๊ฑด์ ์ผ๋ก ๋ณด์ฌ์ง๊ฒํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ธ ๊ฒ์ด๋ค.
Describing the UI ํ ์ ์์ฝ ๋ด์ฉ์ ์งง๊ฒ ์์ฑํ๊ณ ๋์ด๊ฐ๊ฒ ์ต๋๋ค.
- ๋น์ ์ ์ฒซ ์ปดํฌ๋ํธ
๋ฆฌ์กํธ ์ดํ๋ฆฌ์ผ์ด์
์ ์ปดํฌ๋ํธ๋ผ๊ณ ๋ถ๋ฆฌ๋ ๋
๋ฆฝ๋ UI ์กฐ๊ฐ๋ค๋ก ๊ตฌ์ฑ๋๋ค. ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ๋งํฌ์
์ ๋ฟ๋ฆฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์
์ด๋ค. ์ปดํฌ๋ํธ๋ค์ ๋ฒํผ์ฒ๋ผ ์์ ์๋,
์ ์ฒด ํ์ด์ง์ฒ๋ผ ํด ์๋ ์๋ค.
- ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ค๊ณ ๋ด๋ณด๋ด๊ธฐ(Importing and Exporting Components)
๋น์ ์ ํ๋์ ํ์ผ์์ ๋ง์ ์ปดํฌ๋ํธ๋ค์ ์ ์ธํ ์ ์์ง๋ง ๋งค์ฐ ํฐ ํ์ผ์ ์ ์ง๋ณด์ํ๊ธฐ ํ๋ค๋ค. ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด esm(import, export)๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์ด๊ฑด ecmascript์ ๊ท๊ฒฉ์ธ๋ฐ, ์ด๊ฒ react์ ์ฅ์ ์ธ ๊ฒ์ฒ๋ผ ์ด ๊ฒ ๋ง๋ ์ถ๊ธดํ๋ค.(๊ฒฐ๊ตญ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ๊ทธ๋ฅ JS ํจ์์ด๊ณ ์ด ํจ์๋ฅผ esm์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ ๋ฟ์ธ๋ฐ..!)
- JSX๋ฅผ ํตํด markup์ ์์ฑ ๊ฐ๋ฅ
๊ฐ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ๋ฆฌ์กํธ๊ฐ ๋ธ๋ผ์ฐ์ ๋ก ๋ ๋๋งํ๋ ๋งํฌ์ ๋ค์ ํฌํจํ๊ณ ์๋ JS ํจ์์ด๋ค. ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ค์ JSX๋ผ๊ณ ๋ถ๋ฆฌ๋ syntax extension์ ์ฌ์ฉํ์ฌ markup์ ํํํ๋ค. JSX๋ HTML์ด๋ ๋น์ทํ์ง๋ง, ์ข๋ ์๊ฒฉํ๊ณ ๋์ ์ธ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ค ์ ์๋ค.
{}(์ค๊ดํธ)
๋ฅผ ํตํด JSX์ JS ๋ฌธ๋ฒ ์ฌ์ฉํ๊ธฐ
JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ์์์ (HTML ๊ฐ์) markup์ ์์ฑํ ์ ์๊ฒ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๊ฐ์ ๊ณณ์์ ๋ ๋๋ง ๋ก์ง๊ณผ ์ปจํ ์ธ ๋ฅผ ์ ์งํ๊ฒ ํด์ค๋ค. ๋๋ก๋ ๋น์ ์ markup์ ์์ JS ๋ก์ง ํน์ ๋์ ์ธ ๊ฐ์ ๋ฃ๊ณ ์ถ์ ์ ์๋ค. ์ด๋ด ๋, ๋น์ ์ ์ค๊ดํธ๋ฅผ ์ฌ์ฉํ์ฌ JSX์ JS ๋ฌธ๋ฒ์ ๋ฃ์ ์ ์๋ค.
- ์ปดํฌ๋ํธ๋ฅผ ํต๊ณผํ๋ props
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ค์ ์๋ก ์ํตํ๊ธฐ ์ํด props
๋ฅผ ์ฌ์ฉํ๋ค. ๋ชจ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ ๊ทธ๋ค์ props๋ฅผ ์์ ์ปดํฌ๋ํธ์๊ฒ ์ ๋ฌํจ์ผ๋ก์จ ๋ช๋ช ์ ๋ณด๋ฅผ ์ค ์ ์๋ค. props๋ HTML attributes๋ฅผ
์๊ฐ๋๊ฒ ํ์ง๋ง, props๋ฅผ ํตํด์๋ object, array, function, ์ฌ์ง์ด JSX๊น์ง๋ ์ ๋ฌ ํ ์ ์๋ค.
- ์กฐ๊ฑด๋ถ ๋ ๋๋ง
๋น์ ์ ์ปดํฌ๋ํธ๋ ์ข
์ข
์กฐ๊ฑด์ ๋ฐ๋ผ์ ๋ค๋ฅธ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๊ฒ์ด๋ค. ๋ฆฌ์กํธ์์ , JS์ if ์กฐ๊ฑด๋ฌธ์ฒ๋ผ &&
ํน์ ? :
์ ์ฌ์ฉํ์ฌ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ ์ ์๋ค.
- ๋ฆฌ์คํธ ๋ ๋๋ง
๋น์ ์ ์ด๋ค ๋ฐ์ดํฐ์ ๋ฌถ์์ผ๋ก๋ถํฐ ๋ค์์ ๋น์ทํ ์ปดํฌ๋ํธ๋ค์ ๋ณด์ฌ์ฃผ๊ธธ ์ํ ๊ฒ์ด๋ค. ๋น์ ์ ๋ฆฌ์กํธ์ ํจ๊ป JS์ filter
๊ณผ map
์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ๋ฐฐ์ด์ ์ปดํฌ๋ํธ ๋ฐฐ์ด๋ก ๋ณํํ ์ ์๋ค.
๊ฐ๊ฐ์ ๋ฐฐ์ด ์์ดํ
๋ค์๋ ํน์ ํ key
๊ฐ ํ์ํ๋ค.(์ค์) ๋ณดํต์ Database์ id๋ฅผ key๋ก ์ฌ์ฉํ๋ค. ๋ฆฌ์กํธ๋ Key
๋ฅผ ํตํด ๋ฐฐ์ด์ด ๋ณํ๋๋ผ๋ ๋ฐฐ์ด ๋ด๋ถ์ ๊ฐ ์์ดํ
๋ค์ ์ถ์ ํ ์ ์๊ฒ ๋๋ค.
- ์ปดํฌ๋ํธ๋ค์ ์์ํ๊ฒ ๋์ด๋ผ
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ค์ ์์ํ ํจ์์ฒ๋ผ ์๋ํด์ผ ํ๋ค.
- ์์ํ ํจ์๋ ๋์ผํ ์ธ์๋ฅผ ๋ฐ์ผ๋ฉด ํญ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.
- ์์ํ ํจ์๋ ๋ถ์์ฉ(side effect)์ด ์๋ค.
์ปดํฌ๋ํธ๋ค์ ์๊ฒฉํ๊ฒ ์์ํจ์๋ก ์์ฑํจ์ผ๋ก์จ, ์์์น ๋ชปํ ๋ฒ๊ทธ๋ค๊ณผ ์ฝ๋๋ฒ ์ด์ค๊ฐ ์ปค์ง์ ๋ฐ๋ผ ์๊ธฐ๋ ์์ธก๋ถ๊ฐ๋ฅํ ์ํฉ์ ํผํ ์ ์๋ค.
1. Your First Component
์ปดํฌ๋ํธ
๋ ๋ฆฌ์กํธ์ ํต์ฌ์ ์ธ ์ปจ์
์ด๋ค. ์ปดํฌ๋ํธ๋ค์ UI๋ฅผ ์์ฑํจ์ ์์ด์ ๊ธฐ์ด๊ฐ ๋๊ณ , ๊ทธ๊ฒ์ ๋น์ ์ ๋ฆฌ์กํธ ์ฌํ์ ์์ํ๋๋ฐ ์์ด์ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ด๋ค.
Components: UI building blocks
HTML์์ ์ ํด์ง ํ๊ทธ๋ฅผ ์ ๊ณตํ๋ฏ, ๋ฆฌ์กํธ์์๋ ๋น์ ๋ง์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋ค. ๋ํ, Chakra UI์ Material UI ๊ฐ์ ๋ฆฌ์กํธ ์คํ์์ค ์ปค๋ฎค๋ํธ๋ฅผ ํตํด ์์ฒ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ์ฆ, ๋น์ ๋ง์ ์ฌ์ฌ์ฉ๊ฐ๋ฅํ UI element๋ฅผ ๋ง๋ค ์ ์๋ค๋ ๊ฒ์ด๋ค.
Defining a component
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ๋งํฌ์ ๊ณผ ํจ๊ป ๋ฟ๋ฆด ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์์ด๋ค.
Using a component
๋น์ ์ด ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ๋ด๋ถ์์ ์ฌ์ฉํ ์ ์๋ค.(์ด๊ฑธ composition ํน์ nesting์ด๋ผ๊ณ ํ๋ค.
) ์ด๊ฒ์ ๋น์ ์ด ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
HTML tag๋ ์๋ฌธ์๋ก ์ ๊ณต๋๊ฒ์ ๋ฆฌ์กํธ๊ฐ ์์์ฐจ๋ฆด ์ ์๋ค. ๊ทธ๋์ ๋น์ ์ด ๋ง๋ ์ปดํฌ๋ํธ๋ ๋๋ฌธ์๋ก ์์ํด์ผ ํ๋ค.
- ์ปดํฌ๋ํธ ํจ์ ๋ด๋ถ์์ ๋ค๋ฅธ ์ปดํฌ๋ํธ ํจ์๋ฅผ ์ ์ํ๋ ๊ฒ์ ์ ๋ ๊ธ์ง๋ค! ๋ชจ๋ ์ปดํฌ๋ํธ๋ ๋ฐ๋์ ์ต์๋จ์์ ์ ์๋์ด์ผ ํ๋ค.
React ์ดํ๋ฆฌ์ผ์ด์ ์
root
์ปดํฌ๋ํธ์์ ์์๋๋ค. CRA๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ,src/App.jsx
๊ฐ root ์ปดํฌ๋ํธ์ด๋ฉฐ Next.js ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ,pages/inex.jsx
๊ฐ root ์ปดํฌ๋ํธ์ด๋ค. ๋๋ถ๋ถ์ React ์ฑ์ ๋ชจ๋ ๋ถ๋ถ์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ค. ์์ฃผ ์์ ๋จ์๋ถํฐ ํ์ด์ง์ ๊ฐ์ ํฐ ๋จ์๊น์ง! ์ปดํฌ๋ํธ๊ฐ ๋จ ํ๋ฒ๋ง ์ฌ์ฉ๋๋ค๊ณ ํ๋๋ผ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ํตํด ์์ฑํ๋ ๊ฒ์ UI ์ฝ๋์ ๋งํฌ์ ์ ์ ๋ฆฌํ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ด๋ค.
React ๊ธฐ๋ฐ์ ๋ง์ ํ๋ ์์ํฌ๋ค์ ๋น HTML ํ์ผ์ ์ฌ์ฉํ๊ณ JS๋ก ํ์ด์ง ๊ด๋ฆฌ๋ฅผ ๋์ ์ํํ๋๋ก ํ๋ ๋์ , React ์ปดํฌ๋ํธ์์ HTML์ ์๋์ผ๋ก ์์ฑํ๊ธฐ๋ ํ๋ค. ๊ทธ๋ผ์ผ๋ก์จ JS ์ฝ๋๊ฐ ๋ก๋๋๊ธฐ ์ ์ ์ฑ์์ ์ผ๋ถ ์ปจํ ์ธ ๋ฅผ ํ์ํ ์ ์๋ค.
2. Importing and Exporting Components
The root component file
- React์์๋
App.js
๋ผ๋root ์ปดํฌ๋ํธ ํ์ผ
์ด ์กด์ฌํ๋ค. ์ค์ ์ ๋ฐ๋ผ์ ๋ค๋ฅธ ํ์ผ์ ์กด์ฌํ ์๋ ์๋ค. ํํธ NEXT.js์์๋ ํ์ด์ง ๋ณ๋ก root ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅผ ์ ์๋ค.
Exporting and importing a component
- ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฅธ ํ์ผ์์ ์ฌ์ฉํ๋ ค๋ฉด, ์ปดํฌ๋ํธ๋ฅผ
export
ํด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ ํ์ผ์์import
ํด์ผ ํ๋ค.
React์์๋ โGallery.jsโ์ โ./Galleryโ ๋ชจ๋ ์ฌ์ฉ ๊ฐ๋ฅํ์ง๋ง, ์ ์์ ๊ฒฝ์ฐ๊ฐ ESM ๋ฐฉ์์ ๋ ๊ฐ๊น๋ค.
Exporting and importing multiple components from the same file
- ํ๋์ ํ์ผ์์
default export
์named export
๋ฅผ ๋์์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
Writing Markup with JSX
- JSX๋ JS๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ์ด๋ค. JS ํ์ผ ์์ HTML๊ณผ ์ ์ฌํ ๋งํฌ์ ์ ์์ฑํ ์ ์๋๋ก ํด์ค๋ค. ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ๋ ์์ง๋ง, ๋ณดํธ์ ์ผ๋ก JSX๊ฐ ์ฌ์ฉ๋๋ค.
React.createElement('div', null,
Hello ${this.props.toWhat});
๊ณผ ๊ฐ์ด JSX๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ์๋ ์๋ค.
JSX: Putting markup into JavaScript
- ๊ธฐ์กด์ ์น์ HTML๋ก ์ปจํ ์ธ , CSS๋ก ๋์์ธ, JS๋ก ๋ก์ง์ ์์ฑํด์๋ค. ์ด๋ ๋ ๋ณดํต์ ๋ถ๋ฆฌ๋ ํ์ผ๋ก ๊ฐ๊ฐ ๊ด๋ฆฌํ์๋ค.
- ์น์ด ๋ฐ์ ํ๊ณ ๋์ฑ๋ interactiveํด์ง๋ฉด์
๋ก์ง์ด ์ปจํ ์ธ ๋ฅผ ๊ฒฐ์ ํ๋ ๊ฒฝ์ฐ
๊ฐ ์ฆ๊ฐํ๋ค. ๊ทธ๋ฌ๋ฉด์ JS๊ฐ HTML๋ ๋ด๋นํ๊ฒ ๋์๊ณ ์ด๊ฒ ๋ฐ๋ก React ์ปดํฌ๋ํธ์ ๋ ๋๋ง ๋ก์ง๊ณผ ๋งํฌ์ ์ด ํจ๊ป ๋ค์ด๊ฐ๊ฒ ๋ ์ด์ ์ด๋ค. - ๊ฐ React ์ปดํฌ๋ํธ๋ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง๋ ๋งํฌ์ ์ ๋ฐํํ๋ ํจ์์ด๋ค. React ์ปดํฌ๋ํธ๋ JSX๋ผ๋ ๊ตฌ๋ฌธ ํ์ฅ์(JS ๊ฐ์ฒด)๋ฅผ ์ฌ์ฉํ์ฌ ํด๋นํ๋ ๋งํฌ์ ์ ํํํ๋ค. HTML๊ณผ ์ ์ฌํด๋ณด์ด์ง๋ง ๋ ์๊ฒฉํ๊ณ ๋์ ์ผ๋ก ์ ๋ณด๋ฅผ ํ์ํ ์ ์๋ค.
JSX์ React๋ ๋ณ๊ฐ์ ๊ฐ๋ ์ด๋ค. ์ฌ์ค์ ํจ๊ป ์ฌ์ฉ๋๊ธฐ๋ ํ์ง๋ง ๋ ๋ฆฝ์ ์ผ๋ก ์ฌ์ฉ๋ ๊ฐ๋ฅํ๋ค. JSX๋
๊ตฌ๋ฌธ ํ์ฅ
, React๋ JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
The Rules of JSX
1. Return a single root element
- JSX๋ ๋ฐ๋์ ํ๋์ ๋ฃจํธ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํด์ผ ํ๋ค. ์ฌ๋ฌ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํ๋ ค๋ฉด,
React.Fragment
(<></>
)๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
์ ํ๋์ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํด์ผํ ๊น??
JSX๋ ๊ฒฐ๊ตญJS ๊ฐ์ฒด
์ด๋ค. ํ๋ฐ ํ๋์ ์๋ฆฌ๋จผํธ๋ก ๊ฐ์ธ์ง ์์ผ๋ฉด ๋ง์น ๋ฐฐ์ด์ ๊ฐ์ธ์ง ์๊ณ ํ๋ฒ์ ์ฌ๋ฌ๊ฐ์ ์์๋ฅผ returnํ๊ฒ ๋ค๋ ๊ฒ๊ณผ ๋์ผํ๋ค.
2. Close all the tags
- ๋ฐ๋์ ํ๊ทธ๋ฅผ ๋ช ์์ ์ผ๋ก ๋ซ์์ผ ํ๋ค.
3. camelCase all most of the things!
- JSX๋ ๊ฒฐ๊ตญ JS ๊ฐ์ฒด์ด๊ณ ์ด ์์์ ์์ฑ๋ ์ดํธ๋ฆฌ๋ทฐํธ๋ค์ ์ด ๊ฐ์ฒด์ key๊ฐ ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ camelCase๋ก ์์ฑํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
- ๋ํ ์ผ๋ฐ HTML ํ๊ทธ์ ์ดํธ๋ฆฌ๋ทฐํธ ์ค
class
๋ฅผ ๋์ฒดํ๋ ๊ฒ์className
์ผ๋ก ์ด๋ JS์ ์ด๋ฏธ ์กด์ฌํ๋class
์์ฝ์ด๋๋ฌธ์ด๋ค.
JavaScript in JSX with Curly Braces
- JSX๋ก ์์ฑํ ๋งํฌ์
์์ JS ๋ก์ง์ ์ถ๊ฐํ๊ฑฐ๋ ๋์ ์ธ ๊ฐ์ ํํํ๊ณ ์ถ์ ๋, ์ค๊ดํธ
{}
๋ฅผ ์ฌ์ฉํ๋ค.
Using โdouble curliesโ: CSS and other objects in JSX
- ์ข ์ข ์ค๊ดํธ ์์ ์ค๊ดํธ๋ฅผ ์ฌ์ฉํด์ผ ํ ๋๊ฐ ์๋ค. ์๋ฅผ ๋ค์ด, CSS๋ฅผ ์์ฑํ ๋, ์ค๊ดํธ ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํด์ผ ํ๋ค. ์ด๋, ์ค๊ดํธ๋ฅผ ๋๋ฒ ์ฌ์ฉํ๋ฉด ๋๋ค.(์๊ทผ ์ ํท๊ฐ๋ฆฐ๋ค.)
- ๋ฐ๋์ JSX์์ ๊ฐ์ฅ ๋ฐ๊นฅ
{}
๋ JS ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ์ํ ๊ฒ์ด๊ณ , ์์ชฝ{}
๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ธฐ ์ํ ๊ฒ์ด๋ผ๋ ๊ฒ์ ๊ธฐ์ตํ์.
style ์ ๋ฌ์ ์ํ ๊ฐ์ฒด์ key๊ฐ์ camelCase๋ก ์์ฑํด์ผ ํ๋ค.
Passing Props to a Component
- React ์ปดํฌ๋ํธ๋ props๋ฅผ ์ด์ฉํด ์๋ก ํต์ ํ๋ค.(๊ฐ์ ์ฃผ๊ณ ๋ฐ๋๋ค.) ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ props๋ฅผ ์ ๋ฌํจ์ผ๋ก์จ ์ ๋ณด๋ฅผ ์์ ์ปดํฌ๋ํธ์๊ฒ ์ ๋ฌํ ์ ์๋ค.
- props๋ HTML ์ดํธ๋ฆฌ๋ทฐํธ(์์ฑ)์ ๋ ์ค๋ฅด๊ฒ ํ์ง๋ง, JS์ ๋ชจ๋
๊ฐ
์ ์ ๋ฌํ ์ ์๋ค.
Familiar props
function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/1bX5QH6.jpg"
alt="Lin Lanying"
width={100}
height={100}
/>
);
}
- ์์ ์ฝ๋์์
src
,alt
,width
,height
๋ ๋ชจ๋ props์ด๋ค. ์ด๋ HTML์ ์ดํธ๋ฆฌ๋ทฐํธ์ ์ ์ฌํ๋ค.
์๋์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ๋ถ๋ชจ๊ฐ ์ ๋ฌํ props๋ฅผ ๋ฐ์์ ์์์ด ์ฌ์ฉํ ์ ์๋ค.
import { getImageUrl } from './utils.js';
// ๊ฐ์ธ์ ์ผ๋ก ๋ด๊ฐ ์ข์ํ๋ ๋ฐฉ๋ฒ
function Avatar(props) {
const { person, size } = props;
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
// ํ๋ผ๋ฏธํฐ๋ก ๋ฐ๋ก ๊ตฌ์กฐ๋ถํดํ ๋นํ๋ ๋ฐฉ๋ฒ
function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
export default function Profile() {
return (
<div>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
</div>
);
}
- props๋ ์ปดํฌ๋ํธ์์ ์ ๋ฌํ ์ ์๋ ์ ์ผํ
ํจ์์ ํ๋ผ๋ฏธํฐ
์ด๋ค.
Forwarding props with the JSX spread syntax
- props๋ฅผ ์ ๋ฌํ ๋,
์ ๋ฌํ๊ณ ์ถ์ props์ ๊ฐ์๊ฐ ๋ง์์ง๋ฉด
๋ฒ๊ฑฐ๋กญ๋ค. ์ด๋,JSX spread syntax
๋ฅผ ์ฌ์ฉํ๋ฉด ํธ๋ฆฌํ๋ค.
function Profile({ person, size, isSepia, thickBorder }) {
return (
<div className="card">
<Avatar
person={person}
size={size}
isSepia={isSepia}
thickBorder={thickBorder}
/>
</div>
);
}
// ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋ชจ๋ props๋ฅผ ์ ๋ฌํ๋ค๋ฉด ์๋์ ๊ฐ์ด ์ฐ๋ ๊ฒ ๋ ๊น๋ํ ์ ์๋ค.
function Profile(props) {
return (
<div className="card">
<Avatar {...props} />
</div>
);
}
Passing JSX as children
- ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ๋,
<Avatar />
์ฒ๋ผ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๋ผ,<Avatar></Avatar>
์ฒ๋ผ ์ฌ์ฉํ ์๋ ์๋ค. ์ด๋, ์ปดํฌ๋ํธ์children
์ด๋ผ๋ props์ JSX๋ฅผ ์ ๋ฌํ ์ ์๋ค.
import Avatar from './Avatar.js';
// Card ์ปดํฌ๋ํธ๋ ๋ด๋ถ์์ ๋ฌด์์ด ๋ ๋๋ง๋๋์ง ์ ํ์๊ฐ ์๋ค.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
export default function Profile() {
return (
<Card>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
</Card>
);
}
- ์๊ฐ์ ๋ํผ์ ๋ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋,
children
์ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค.
import Avatar from './Avatar.js';
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
function CardWithAvatar({ children }) {
return (
<Card>
<Avatar size={100} />
{children}
</Card>
);
}
export default function Profile() {
return (
<CardWithAvatar>
<h1>Katsuko Saruhashi</h1>
<p>Chemist</p>
</CardWithAvatar>
);
}
How props change over time
- ์ปดํฌ๋ํธ๋
props
๋ฅผ ํตํด ์ ๋ณด๋ฅผ ์ ๋ฌ๋ฐ๋๋ค. ์ด๋,props
๋immutable
ํ๋ค. ์ฆ, ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ๋์props
๋ ๋ณํ์ง ์๋๋ค. - ๋ฐ๋์ props์ ๋ํ ๋ณ๊ฒฝ์ ์๋ํ์ง ๋ง์. ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ๋์ props๋ ๋ณํ์ง ์๋๋ค๋ ๊ฒ์ ๊ธฐ์ตํ์.
- ์ด๋ค ๋ณ๊ฒฝ์ ์ํ ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ณ ์ถ๋ค๋ฉด,
state
๋ฅผ ์ฌ์ฉํ์.
Conditional Rendering
- ์ด๋ค ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ UI๋ฅผ ๋ณด์ฌ์ค์ผํ๋ ๊ฒฝ์ฐ๋ก ๋ฆฌ์กํธ์์๋ ์ฃผ๋ก
if
๋ฌธ,&&
์ฐ์ฐ์(๋ ผ๋ฆฌ ์ฐ์ฐ์),?
์:
์ฐ์ฐ์(์ผํญ ์ฐ์ฐ์)๋ฅผ ์ฌ์ฉํ๋ค. null
!!! ๋ฆฌ์กํธ์์null
์ ์๋ฌด๊ฒ๋ ๋ ๋๋งํ์ง ์๋๋ค.(null์ ์๋ฌด๊ฒ๋ ๋ ๋๋งํ์ง ์๊ฒ ๋ค๋ ์๋ฏธ์ด๋ค.)
null
์ ์๋ฌด๊ฒ๋ ๋ ๋๋งํ์ง ์๋๋ค๋ ์ ์ ์ด์ฉํ๋ฉด, ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ ์ ์๋ค.
function Profile({ person }) {
if (person === null) {
return null;
}
return (
<div>
<Avatar person={person} />
<div>{person.name}</div>
</div>
);
}
- ์ผํญ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ ์ ์๋ค. ๋จ, ๋๋ฌด ์ฆ์ ์ผํญ์ฐ์ฐ์ ์ฌ์ฉ์ ๊ฐ๋ ์ฑ์ ๋ฎ์ถ ์ ์๊ธฐ์ ์์ ์ปดํฌ๋ํธ๋ฅผ ์ถ์ถํ์ฌ ์ ๋ฆฌํ๋ ๊ฒ์ ๊ณ ๋ คํ๋ ๊ฒ ์ข๋ค.
function Profile({ person }) {
return (
<div>
{person !== null ? (
<>
<Avatar person={person} />
<div>{person.name}</div>
</>
) : null}
</div>
);
}
- ๋ ผ๋ฆฌ์ฐ์ฐ์(&&)๋ ์ฃผ๋ก ์กฐ๊ฑด์ด ์ฐธ์ผ ๋ ์ผ๋ถ JSX๋ฅผ ๋ ๋๋งํ๊ณ ๊ทธ๋ ์ง ์์ผ๋ฉด ์๋ฌด๊ฒ๋ ๋ ๋๋งํ์ง ์์ผ๋ ค ํ ๋ ์์ฃผ ์ฌ์ฉ๋๋ค.
function Profile({ person }) {
return (
<div>
{person !== null && (
<>
<Avatar person={person} />
<div>{person.name}</div>
</>
)}
</div>
);
}
&&์ ์ผ์ชฝ์ ์ซ์๊ฐ ์ค๊ฒ ํ์ง ๋ง์! ์๋ฅผ ๋ค์ด ์ฐ๋ฆฌ๋ ํํ
0
์ด falsyํ๊ธฐ ๋๋ฌธ์0
์ด ์ค๋ฉด0
์ด ๋ ๋๋ง๋์ง ์๋๋ค๊ณ ์๊ฐํ ์ ์๋ค. ํ์ง๋ง0
์ falsyํ์ง๋งfalse
๋ ์๋๊ธฐ ๋๋ฌธ์0
์ด ๋ ๋๋ง๋๋ค.
function Example() {
return (
<div>
{0 && <div>zero</div>}
{false && <div>zero</div>}
</div>
);
}
์ด๋ด ๋ 0์ ํํ์ true/false๋ก ๋ฐ๊ฟ์ฃผ๋ฉด ๋๋ค.
function Example() {
return (
<div>
{!!0 && <div>zero</div>}
{!!false && <div>zero</div>}
</div>
);
}
Rendering Lists
- ์ฐ๋ฆฌ๊ฐ ๊ฐ๊ณ ์๋ ๋ฐ์ดํฐ ๋ชจ์์์ ์ ์ฌํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๊ฐ ๋ ๋๋งํ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ์ด๋,
map
ํน์filter
์ ์ฌ์ฉํ๋ฉด ๋๋ค.
function ProfileList({ profiles }) {
return (
<div>
{profiles.map((profile) => (
<Profile person={profile} />
))}
</div>
);
}
Keeping list items in order with key
- ๋ฐฐ์ด ํํ์ ๋ฐ์ดํฐ๋ฅผ map, filter ๋ฑ์ผ๋ก ์ปดํฌ๋ํธ๋ก ํํํ ๋,
key
๋ฅผ ์ง์ ํด์ฃผ์ง์์ผ๋ฉด ์๋์ ๊ฐ์ ๊ฒฝ๊ณ ๋ฉ์์ง๋ฅผ ํ์ธํ ์ ์๋ค.
Warning: Each child in a list should have a unique โkeyโ prop.
๊ฒฝ๊ณ : ๋ชฉ๋ก์ ๊ฐ ์์์๋ ๊ณ ์ ํ โkeyโ prop์ด ์์ด์ผ ํฉ๋๋ค.
- map() ํธ์ถ ๋ด๋ถ์ JSX ์์์๋ ํญ์ ๊ณ ์ ํ
key
prop์ ์ง์ ํด์ผ ํ๋ค. key
๋ ๊ฐ ์ปดํฌ๋ํธ๊ฐ ์ด๋ค ๋ฐฐ์ด ํญ๋ชฉ์ ํด๋นํ๋์ง ๋ฆฌ์กํธ์ ์๋ ค์ฃผ์ด ๋์ค์ ๋งค์นญํ ์ ์๋๋ก ํ๋ค. ๋ฐฐ์ด์ด ์ ๋ ฌ๋์ด ๊ทธ ๋ด๋ถ ๋ฐ์ดํฐ๊ฐ ์ด๋ํ๊ฑฐ๋, ์ฝ์ , ์ญ์ ๋๋ ๊ฒฝ์ฐ key๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ถ์ ํ๋ค.- key๊ฐ์ ํ๋ก ํธ์๋์์ ์ฆ์์ผ๋ก ์์ฑํ๋ ๊ฒ์ด ์๋, ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ์ ๊ณ ์ ํ ์๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.(๋ก์ปฌ์์ ์์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
crypto.randomUUID()
ํน์uuid
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.)
function ProfileList({ profiles }) {
return (
<div>
{profiles.map((profile) => (
<Profile key={profile.id} person={profile} />
))}
</div>
);
}
Fragment(<></>)์๋ key๊ฐ์ ์ ๋ฌํ ์ ์์ผ๋ฏ๋ก, ๋ฆฌ์กํธ์์ ์ฌ์ฉํ๋ Fragment๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
Rules of keys
- key๋ ํ์ ๊ฐ์ ๊ณ ์ ํด์ผ ํ๋ค. ๋น์ฐํ ๋ค๋ฅธ ๋ฐ์ดํฐ ๋ฐฐ์ด์ JSX ๋ ธ๋์๋ ๋์ผํ key๋ฅผ ์ฌ์ฉํด๋ ๊ด์ฐฎ๋ค.
- key๊ฐ ๋ณ๊ฒฝ๋์ง ์์์ผ ํ๋ค. key๋ ์ปดํฌ๋ํธ์
props
์state
์ ์์กดํด์๋ ์๋๋ค. key๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ๋๋ง๋ค ๊ณ ์ ํ ๊ฐ์ด์ด์ผ ํ๋ค.
Why does React need keys???
- ๋ฐ์คํฌํฑ ํ์ผ์ ์ด๋ฆ ๋์ ์์๊ฐ ์ ํ์๋ค๊ณ ์๊ฐํด๋ณด์. ์ฒ์์ ๋์์ง ์์ง๋ง, ์ฒซ๋ฒ์งธ ํ์ผ์ด ์ง์์ง๋ฉด
๋๋ฒ์งธ ํ์ผ์ด ๊ณง ์ฒซ๋ฒ์งธ ํ์ผ์ด ๋๋ค.
์ฆ, ํท๊ฐ๋ฆฌ๊ฒ ๋๋ค.(๊ทธ๋ฅ ๋ฐฐ์ด์ index๋ก key๋ฅผ ์ง์ ํ๋ฉด ์ด๋ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.) - ์ด ๋, ํด๋์ ํ์ผ ์ด๋ฆ๊ณผ JSX key๋ ๋น์ทํ ์ญํ ์ ํ๋ค. key๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ ํญ๋ชฉ ์ฌ์ด์์ ํน์ ํญ๋ชฉ์ ๊ณ ์ ํ๊ฒ ์๋ณํ ์ ์๋ค. ๋ฐ์ดํฐ ๋ด์ ๊ณ ์ ํ id๋ฅผ ํตํด key๋ฅผ ์ง์ ํ๊ฒ ๋๋ฉด ์ฌ์ ๋ ฌ๋ก ์ธํด ๋ฐ์ดํฐ์ ์์น๊ฐ ๋ณ๊ฒฝ๋๋๋ผ๋ key๋ ๋ณํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ง ์๋๋ค.
์ ๋๋ก key๋ฅผ
Math.random()
๊ณผ ๊ฐ์ด ์ฆ์์์ ์์ฑํ๋ฉด ์๋๋ค. ๋ ๋๋ง๋ ๋๋ง๋ค ์๋ก์ด key๊ฐ ์์ฑ๋๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ๊ฐ ๋ถํ์ํ๊ฒ ๋ฆฌ๋ ๋๋ง๋๊ณ ์ฑ๋ฅ์ด ์ ํ๋๋ค.
์ปดํฌ๋ํธ๋key
๋ฅผ prop์ผ๋ก ๋ฐ์ง ์๋๋ค. ๋ง์ฝ ์์ ์ปดํฌ๋ํธ์๊ฒ ์ด๋ค ๊ณ ์ ํ id๋ฅผ ์ ๋ฌํด์ฃผ๊ณ ์ถ๋ค๋ฉด ๋ณ๋์ prop์ผ๋ก ์ ๋ฌํด์ผ ํ๋ค.<Profile key ={id} userId={id} />
Keeping Components Pure
- ์ปดํฌ๋ํธ๋
props
์state
์ ์์กดํด์๋ ์๋๋ค. ์ปดํฌ๋ํธ๋props
์state
๊ฐ ๋ณ๊ฒฝ๋์ง ์์ผ๋ฉด ํญ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ ๋๋งํด์ผ ํ๋ค. ์ด๋ฅผ์์ ์ปดํฌ๋ํธ
๋ผ๊ณ ํ๋ค.
Purity: Components as formulas
- ์์ ์ปดํฌ๋ํธ๋ ์ํ์ ์ธ ํจ์์ ๋น์ทํ๋ค. ํจ์๋ ์
๋ ฅ๊ฐ์ด ๊ฐ์ผ๋ฉด ํญ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค. ์ปดํฌ๋ํธ๋
props
๊ฐ ๊ฐ์ผ๋ฉด ํญ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ ๋๋งํ๋ค.
function Profile({ person }) {
return (
<div>
<p>{person.name}</p>
<p>{person.age}</p>
</div>
);
}
- ์์ ์ปดํฌ๋ํธ๋ ์์ ์ปดํฌ๋ํธ์ด๋ค.
props
๊ฐ ๊ฐ์ผ๋ฉด ํญ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค. ๋ง์ฝprops
๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์ปดํฌ๋ํธ๋ ๋ค์ ๋ ๋๋ง๋๋ค.
Side Effects: (un)intended consequences
- React์ ๋ ๋๋ง ๊ณผ์ ์ ํญ์ ์์ํด์ผ ํ๋ค. ์ปดํฌ๋ํธ๋ JSX๋ง์ ๋ฐํํ๋ฉฐ, ๋ ๋๋ง ์ ์ ์กด์ฌํด๋ ๊ฐ์ฒด๋ ๋ณ์๋ฅผ ๋ณ๊ฒฝํด์๋ ์๋๋ค. ์ด๋ฅผ
๋ถ์ ํจ๊ณผ
๋ผ๊ณ ํ๋ค.
Detecting impure calculations with StrictMode
- ๋ฆฌ์กํธ์์๋ ๋ ๋๋งํ๋ ๋์ ์ฝ์ ์ ์๋ ์
๋ ฅ๊ฐ์ด 3๊ฐ์ง ์๋ค.
props
,state
,context
. ์ด 3๊ฐ์ง ๊ฐ์ ๋ ๋๋ง ์ค์๋ง ์ฝ์ ์ ์์ผ๋ฉฐ, ๋ ๋๋ง ์ดํ์๋ ์ฝ์ ์ ์๋ค. ์ด๋ฅผ์ฝ๊ธฐ ์ ์ฉ
์ด๋ผ๊ณ ํ๋ค. - ์ฌ์ฉ์ ์
๋ ฅ์ ๋ํ ์๋ต์ผ๋ก ๋ฌด์ธ๊ฐ๋ฅผ ๋ฐ๊พธ๋ ค๋ฉด ๋ณ์ ๋์
state
๋ฅผ ์ค์ ํด์ผ ํ๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ๋์์ ๊ธฐ์กด ๋ณ์, ๊ฐ์ฒด๋ฅผ ์ ๋ ๋ณ๊ฒฝํด์๋ ์๋๋ค. - ๋ฆฌ์กํธ๋
๊ฐ๋ฐ ํ๊ฒฝ
์์ ๊ฐ ์ปดํฌ๋ํธ์ ํจ์๋ฅผ ๋ ๋ฒ ํธ์ถํ๋Strict Mode
๋ฅผ ์ ๊ณตํ๋ค.Strict Mode
๋ ์ปดํฌ๋ํธ ํจ์๋ฅผ๋ ๋ฒ
ํธ์ถํจ์ผ๋ก์จ ๊ท์น์ ์๋ฐํ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฐพ์๋ด๋ ๋ฐ ๋์์ด ๋๋ค.
Where you can cause side effects
- ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์
์์์ฑ
์ ํฌ๊ฒ ์์กดํ์ง๋ง, ์ธ์ ๊ฐ ์ด๋์์ ๊ฐ ๋ฌด์ธ๊ฐ๋ ๋ฐ๋์ด์ผ ํ๋ค.ํ๋ฉด ์ ๋ฐ์ดํธ
,์ ๋๋ฉ์ด์ ์์
,๋ฐ์ดํฐ ๋ณ๊ฒฝ
๊ณผ ๊ฐ์ ์ด๋ฌํ ๋ณ๊ฒฝ์์ฌ์ด๋ ์ดํํธ(๋ถ์ ํจ๊ณผ)
๋ผ๊ณ ํ๋ค. - ์ฌ์ด๋ ์ดํํธ๋ ๋ ๋๋ง ์ค์ ์ผ์ด๋๋ ๊ฒ์ด ์๋๋ผ
๋ถ์์ ์ผ๋ก
์ผ์ด๋๋ ์ผ์ ๋งํ๋ค. - ๋ฆฌ์กํธ์์ ์ฌ์ด๋ ์ดํํธ๋ ์ฃผ๋ก
์ด๋ฒคํธ ํธ๋ค๋ฌ
์ ์ํ๋ค. ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ์ ์ ๊ฐ ์ด๋ค ๋์์ ์ํํ ๋(ex) ๋ฒํผ์ ํด๋ฆญ ํ ๋) React๊ฐ ์คํํ๋ ํจ์์ด๋ค. - ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ปดํฌ๋ํธ์ ๋ด๋ถ์ ์ ์๋์ด์๊ธด ํ์ง๋ง, ๋ ๋๋ง ์ค์๋ ์คํ๋์ง ์๋๋ค. ์ฆ, ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ์์ํ ํ์๊ฐ ์๋ค.
๋ค๋ฅธ ๋ชจ๋ ์ต์ ์ ๋ค ์๋ํ๋๋ฐ๋ ์ฌ์ด๋ ์ดํํธ์ ์ ํฉํ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ฐพ์ ์ ์๋ค๋ฉด,
useEffect
ํ ์ ์ฌ์ฉํ์ฌ ๋ฐํ๋ JSX์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ถ๊ฐํ ์ ์๋ค.
๊ทธ๋ ๊ฒ๋๋ฉด ๋์ค์ ๋ ๋๋ง ํ ์ฌ์ด๋ ์ดํํธ๊ฐ ํ์ฉ๋ ๋ React๊ฐ ์ด๊ฒ์ ์คํํ๋ค. ๋จ, ์ด ๋ฐฉ๋ฒ์ ์ตํ์ ์๋จ์ผ๋ก ๋์ด์ผ ํ๋ค!!!
๊ฐ๋ฅํ๋ฉด ๋ ๋๋ง๋ง์ผ๋ก ๋ก์ง์ ํํํ๊ณ ์ ํด๋ณด์๋ผ! ๋ง์ ๊ฒ์ ๋ฐฐ์ธ ์ ์์ ๊ฒ์ด๋ค!
Why does React care about purity?
- ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฅธ ํ๊ฒฝ(ex) ์๋ฒ)์์ ์คํํ ์ ์๋ค. ์ด ๋, ๋์ผํ ์ ๋ ฅ์ ๋ํด ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๊ธฐ์ ํ๋์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ ์ฌ์ฉ์ ์์ฒญ์ ์ฒ๋ฆฌํ ์ ์๋ค.
- ์
๋ ฅ์ด ๋ณ๊ฒฝ๋์ง ์์ ์ปดํฌ๋ํธ๋ ์ด์ ์ ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ค. ์ด๋ฅผ
๋ฆฌ์กํธ์ ์ฌ์กฐ์
์ด๋ผ๊ณ ํ๋ค.(์์ ํจ์๋ ๋์ผํ ์ ๋ ฅ์ ๋ํด ๋์ผํ ์ถ๋ ฅ์ด ๋์ค๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฅํ๋ค.) - ๊น์ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๋ ๋๋งํ๋ ๋์ค์ ์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด React๋ ์ค๋๋ ๋ ๋๋ง์ ์๋ฃํ์ง ์๊ณ ๋ ๋๋ง์ ๋ค์ ์์ํ ์ ์๋ค.