1. React์์ ํจ์ ์ปดํฌ๋ํธ์ ํด๋์ค ์ปดํฌ๋ํธ์ ์ฐจ์ด
2. props์ state์ ์ฐจ์ด
1. React์์ ํจ์ ์ปดํฌ๋ํธ์ ํด๋์ค ์ปดํฌ๋ํธ์ ์ฐจ์ด โญ๏ธ
- ํด๋์ค ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ
- ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๊ตฌ์กฐ๋ฅผ ๋๊ณ ์์ผ๋ฉฐ, state๋ฅผ ์ด๊ธฐํํ๊ธฐ ์ํด constructor(์์ฑ์) ํจ์๋ฅผ ํ์๋ก ํจ
- ์์ฑ์ ํจ์๋ฅผ ํตํด state๋ฅผ ์ด๊ธฐํํด์ผ ํ๊ธฐ ๋๋ฌธ์ ํจ์ ์ปดํฌ๋ํธ์ ๋นํด ์ฝ๋๊ฐ ๊ธธ์ด์ง๊ณ , ์ฌ์ด์ฆ๊ฐ ์ปค์ง ์ ์์
- state ๊ธฐ๋ฅ ๋ฐ ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ ์์ ๋ฉ์๋๋ฅผ ์ ์ํ ์ ์์
- render ํจ์๊ฐ ๊ผญ ์์ด์ผ ํ๊ณ , ๊ทธ ์์์ ๋ณด์ฌ ์ฃผ์ด์ผ ํ JSX๋ฅผ ๋ฐํํด์ผ ํจ
- ํจ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ
- Hooks๋ฅผ ์ฌ์ฉํด ์์ฑ์ ํจ์๋ฅผ ํตํด state๋ฅผ ์ด๊ธฐํํ์ง ์๋๋ผ๋ ์ฌ์ฉ์ด ๊ฐ๋ฅ(useState() ๋ฑ)
- ์ ์ธํ๊ธฐ ์ข ๋ ํธํ๊ณ ๋ฉ๋ชจ๋ฆฌ ์์์ ๋ ์ฌ์ฉํจ
- ์ ๊ณต๋๋ hook ํจ์๋ฟ๋ง ์๋๋ผ ์ปค์คํ ํ ์ ์์ฑํ์ฌ ๋์ ์ํฌ ์ ์์
- ํ๋ก์ ํธ๋ฅผ ์์ฑํ์ฌ ๋น๋ํ ํ ๋ฐฐํฌํ ๋๋ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฒฐ๊ณผ๋ฌผ์ ํ์ผ ํฌ๊ธฐ๊ฐ ๋ ์์
- Q) ํจ์ํ ์ปดํฌ๋ํธ๊ฐ ์๋ ํจ์ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฅด๋ ์ด์ ? โญ๏ธ
- A) "ํจ์ํ ํ๋ก๊ทธ๋๋ฐ" ๊ณผ ๋ค์ด๋ฐ์ด ๋น์ทํด ํผ๋์ ์ผ๊ธฐํ ์ ์๊ธฐ ๋๋ฌธ
๊ทผ๋ฐ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ์์ ํจ์๋ฅผ ์งํฅํ๋๋ฐ ๋ฆฌ์กํธ๋ ํ ์ด ๋ค์ด๊ฐ์ ์ฌ์ด๋ ์ดํํธ๋ฅผ ์ผ์ผํค๊ธฐ ๋๋ฌธ์ ํจ์ ์ปดํฌ๋ํธ
๋ฅผ ํจ์ํ ์ปดํฌ๋ํธ๋ก ๋ณด๊ธฐ๋ ์ด๋ ค์
2. props์ state์ ์ฐจ์ด โญ๏ธ
- props
- ์ปดํฌ๋ํธ ์์ฑ์ ์ค์ ํ ๋ ์ฌ์ฉํ๋ ์์
- props ๊ฐ์ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉํ๋ ๋ถ๋ชจ ์ปจํฌ๋ํธ์์ ์ค์ ํ ์ ์์
- ์ปดํฌ๋ํธ ์์ ์ ํด๋น props๋ฅผ ์ฝ๊ธฐ ์ ์ฉ์ผ๋ก๋ง ์ฌ์ฉํ ์ ์์
- props๋ฅผ ๋ฐ๊พธ๋ ค๋ฉด ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ๋ฐ๊ฟ์ค์ผ ํจ
- state
- ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ฐ๋ ์ ์๋ ๊ฐ
- Q) props๊ฐ ์ปดํฌ๋ํธ๊ฐ์ ์ ๋ฌ๋ฐ๋ ๊ฒ์ด๋ผ๊ณ ํ๋๋ฐ ์์์์ ๋ถ๋ชจ๋ก๋ ์ ๋ฌํ ์ ์๋๊ฐ!? โญ๏ธ
- A) NO!! ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์ค์ ํ ์ ์์ผ๋ฉฐ, ๋ถ๋ชจ์์ ์์์ผ๋ก๋ง ๋ฐ์ดํฐ๋ฅผ ์ค ์ ์์
- ์์์์ ๋ถ๋ชจ๋ก ๋ฐ์ดํฐ ์ ์กํ๋ ๋ฐฉ๋ฒ = ํจ์ ์ด์ฉ
- ์์์ props๋ฅผ ์ฌ์ฉํด ๋ถ๋ชจ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ๊ฑด๋ค์ค ์ ์์
- ๋ฐ๋ผ์, ๋ถ๋ชจ๊ฐ ํจ์๋ฅผ ๋ฃ์ด props๋ก ์์์๊ฒ ๋๊ฒจ์ฃผ๋ฉด, ์์์ด ๋ฐ์ดํฐ๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฃ์ด์ ํธ์ถํ๋ ๋ฐฉ์์ผ๋ก ๋์ํจ
- ์ฆ!! ๋ถ๋ชจ๊ฐ props๋ก ํจ์๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ์์์ด ๊ทธ ํจ์๋ฅผ ์ด์ฉํด ๊ฐ์ ๊ฑด๋ค์ฃผ๋ ๋ฐฉ์