์ธ์ '๋ด' ์ปท ์ด๋๊ฐ ์๋์? ์ฌ๊ธฐ ์ ๋ด, ํจ์ ์ ์์ฑ์ ์ผ๊ตด? ์ฌ์ง์ ์์ฑ์ ๋ฐฐ๊ฒฝ! ์ฌ๊ธฐ ์ ๋ด
- ์นด์นด์ค ์์ ๋ก๊ทธ์ธ
- ์นด์นด์ค ์ง๋๋ฅผ ์ด์ฉํ ์ง๋ ํ์ด์ง์์ ๊ฒ์๋ฌผ ์์น ์กฐํ
- ํด๋ฆญํ ๊ฒ์๋ฌผ์ ์์น๋ก ๊ฒ์๋ฌผ ์คํฌ๋กค ๋ฐ ํ ์ด๋ (์ด๋ฏธ์ง ์ถ๊ฐ ์์ )
- ๋ฌดํ์คํฌ๋กค์ ํตํ ์ด๋ฏธ์ง ๋ถํ ๋ก๋ฉ
๋ฌดํ์คํฌ๋กค์ ์ฉ
์ด๋ฏธ์ง ๊ณต์ ๊ธฐ๋ฐ ์๋น์ค์ด๊ธฐ๋๋ฌธ์ ํ์ด์ง๋ค์ด์ ๋ณด๋ค ๋ฌดํ์คํฌ๋กค์ ํตํด ๊ฐํธํ๊ฒ ์ฌ์ง ์์ฃผ๋ก ํ์ด ๋ณผ ์ ์๋๋ก ์ ์ํ์ด์.์นด์นด์ค ์์ ๋ก๊ทธ์ธ
์ฌ์ฉ์ ํธ์์ฑ๋ฅผ ๊ณ ๋ คํ์ฌ ์นด์นด์ค ์์ ๋ก๊ทธ์ธ์ ๋์ ํ์ด์.์นด์นด์ค ๋งตsdk ํ์ฉ
์นด์นด์ค ๋งต์ด ๊ตญ๋ด ์ฌ์ฉ์์๊ฒ ๊ตฌ๊ธ๋งต๋ณด๋ค ์ ํฉํ๋ค๊ณ ํ๋จํ๊ณ , ๊ฐ์ API KEY๋ก ์นด์นด์ค ๋ก๊ทธ์ธ๊ณผ ํจ๊ป ๊ด๋ฆฌํ๊ธฐ ์ํด ์ ํํ์ด์.Redux-toolkit์ ์ด์ฉํ ์ํ๊ด๋ฆฌ
ํ์ฌ์ ํ๋ก์ ํธ ๊ท๋ชจ๋ก๋ props drilling๋ ์ ๊ณ ๊ด๋ฆฌํ๋ ์ํ๊ฐ ๋ง์ง ์์ ์ ์ญ์ผ๋ก ์ํ๊ด๋ฆฌ๋ฅผ ํ์ง ์์๋ ๋์ง๋ง ํฅํ ์ ์ง๋ณด์์ ์ธก๋ฉด์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ญ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ ๋ฆฌํ๋ค๊ณ ํ๋จํ์ด์. ์ง๋ ํ์ด์ง๋ ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๊ณ ๋ฌดํ ์คํฌ๋กค ํ์ด์ง๋ ์ต์ ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๊ธฐ ๋๋ฌธ๋ฐ ๊ฐ๊ฐ ๋๋์ด์ ์ ์ญ์ํ๊ด๋ฆฌ๋ฅผ ํ์ด์.๋ชจ๋ฌ ๋ ๋๋ง ๋ฌธ์
๊ธฐ์กด์ ๋ชจ๋ฌ์ฐฝ์ ๊ณต์ฉ์ปดํฌ๋ํธ๋ก ๋ง๋ค ๋ ๋ชจ๋ฌ์ ์ด๊ณ ๋ซ๋ state์ css์ display์์ฑ์ ์ฌ์ฉํ์ฌ ๊ตฌํํ์์ต๋๋ค. ํ์ง๋ง ํ์ฌ ํ๋ก์ ํธ์์ ๋ชจ๋ฌ์ฐฝ์ ๊ฒ์๋ฌผ์ ์์ธ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ฉ๋๋ก ์ฌ์ฉํ๋ฉฐ ๋ชจ๋ฌ ๋ด๋ถ์ ๊ฒ์๋ฌผ ์ ๋ณด, ๊ฒ์๋ฌผ์ ๋ํ ๋๊ธ ๋ฑ์ ์ ๋ณด๊ฐ ๋ค์ด๊ฐ๋ฉด์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ฌ๋ฌ๊ฐ์ ๊ฒ์๋ฌผ์ ๋ ๋๋งํ๋ฉฐ ํ๋ฉด์ ๋ณด์ด์ง ์์ง๋ง ๋ชจ๋ฌ ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ๋ฒ ๋ ๋๋ง๋ ๋ฟ๋๋ฌ ๋ชจ๋ฌ ์์ ๋ค์ด๊ฐ๋ children์ปดํฌ๋ํธ์ ์ํ๋ ์ด๊ธฐํ๊ฐ ๋์ง์๋ ๋ฌธ์ ๊ฐ ์๊ฒผ์ต๋๋ค.
์์ ๋ง์๋๋ฆฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ์ํด ๋ชจ๋ฌ์ ์ด๊ณ ๋ซ๋ ๋ฐฉ์์ ์์ ํ์ต๋๋ค. ๊ธฐ์กด์ CSS๋ฅผ ํ์ฉํ ๋ฐฉ์์์ ๋ชจ๋ฌ์ ์์ฑ์ฌ๋ถ๋ฅผ ์ ํ๋ state๋ฅผ ํตํด ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ๋ฉด์ ์ ์ ๊ฐ ๊ฒ์๋ฌผ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ํด๋ฆญํ๋ ๋ฑ์ ์ก์ ์ด ์ผ์ด๋ฌ์ ๊ฒฝ์ฐ์๋ง ๋ชจ๋ฌ์ด ๋ ๋๋ง ๋๋๋ก ์์ ํ์ต๋๋ค.์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํตํด ๋ถํ์ํ ๋ ๋๋ง์ ์ค์ด๊ณ children ์ปดํฌ๋ํธ์ ์ํ๊ฐ์ด ๋ฆฌ์กํธ์ด ์๋ช ์ฃผ๊ธฐ๋ฅผ ๋ฐ๋ผ ๋ชจ๋ฌ์ด ๋ซํ๋ฉด ์ด๊ธฐํ ๋๋๋ก ๋ง๋ค์์ต๋๋ค.
useEffect๊ฐ ๋ ๋ฒ ์คํ๋๋ ๊ฒฝ์ฐ
๋๋ฒ์งธ ํธ๋ฌ๋ธ ์ํ ์ผ๋ก๋ ํน์ ์ํฉ์์๋ง ์๋๋์ด์ผํ๋ํน์ ์ํฉ์์๋ง ์๋๋์ด์ผํ๋ useEffect hook์ด ๋๋ฒ ์๋ํ๋ ์ํฉ์ด์์ต๋๋ค. console.log๋ฅผ ์ฐ์ด๊ฐ๋ฉฐ ์๋ฒ๋ก๋ถํฐ ์์ฒญํ ๋ฐ์ดํฐ๊ฐ ์ ๋ค์ด์๋์ง ํ์ธํ๋ ์ค ๊ฒ์๋ฌผ ๋ฐ์ดํฐ๊ฐ ๊ฐ์ ๋ถ๋ถ์์ 2๋ฒ ์ถ๋ ฅ๋๊ฒ์ ๋ณผ ์ ์์์ต๋๋ค. ์ค๋ฅธ์ชฝ ์์ ์ฝ๋์ฒ๋ผ dispatch๋ ์ต์ด ๋ ๋๋ง ๋์ page๊ฐ ๋ณํ ๋๋ง ์๋ํด์ผํ๋๋ฐ dispatch๋ ๋ฐ์ดํฐ๋ฅผ ์ถ๋ ฅํด๋ณด๋ฉด page์ ๋ณํ๊ฐ ์๋๋ฐ๋ 2๋ฒ์ฉ ์ถ๋ ฅ์ด ๋๋ ํ์์ด์์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๊ฒ์์ ํ๋ ์ค index.js์ react strict mode๊ฐ ๊ฐ๋ฐํ๊ฒฝ์์์ ๋ฌธ์ ๋ฐ์์ ๊ฐ์งํ๊ธฐ์ํด ๋๋ฒ ๋ ๋๋ง์ ์งํํ๋ค๋๊ฒ์ ์๊ฒ๋์๊ณ ํด๋น ๊ธฐ๋ฅ์ ์ข ๋ฃํ๋ฉด ๋ค์ ์ํ๋ ๋๋ก ํน์ ์กฐ๊ฑด์์๋ง dispatch๋ฅผ ์คํํ์ต๋๋ค.
์ฝ๋์ปจ๋ฒค์
- ์ปดํฌ๋ํธ : PascalCase
- ํจ์ : camelCase
- ๋ณ์ : camelCase
- ํด๋๋ช : ์๋ฌธ์
๊นํ๋ก์ฐ
- ๊ฐ์ ์์ ํ ๋ธ๋์น ์์ฑ
- dev ๋ธ๋์น ์์ฑ
- ์ด์์์ผ๋ฉด dev ๋ณํฉ
| ์ด์์ค | ์ด์์ฐฌ | ์์ ํฌ |
|---|---|---|
![]() |
![]() |
![]() |
| Seokjun7074 | yc8569 | jinaSE0 |


