1. ๋ฆฌ์กํธ ์ดํด ์ปดํฌ๋ํธ๋ ํ๋ก์ ํธ์์ ํน์ ๋ถ๋ถ์ด ์ด๋ป๊ฒ ์๊ธธ์ง ์ ํ๋ ์ ์ธ์ฒด์ด๋ค. (1) ์ด๊ธฐ ๋ ๋๋ง render() ํจ์๋ ์ปดํฌ๋ํธ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๋์ง ์ ์ํ๋ ์ญํ ์ ํ๋ค. ๋๋ถ์ด, ๋ทฐ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๊ณ ์ด๋ป๊ฒ ์๋ํ๋์ง ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํจ์์ด๋ค. rende
import ๊ตฌ๋ฌธ์ ์๋ ๋ธ๋ผ์ฐ์ ์๋ ์๋ ๊ธฐ๋ฅ์ธ๋ฐ, ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ํ๊ฒฝ์์ js๋ฅผ ์คํํ ์ ์๋๋ก node.js์์ ์ง์ํด์ฃผ๋ ๊ธฐ๋ฅ์ด๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ฌ์ฉํ ์ ์๊ฒ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋๋ฐ, ๋ฒ๋ค๋ฌ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด import๋ก ๋ชจ๋์ ๋ถ๋ฌ์์ ๋ ๋ถ
์ปดํฌ๋ํธ ์ ์ธ๋ฐฉ์์ ํด๋์คํ ์ปดํฌ๋ํธ์ ํจ์ํ ์ปดํฌ๋ํธ๊ฐ ์๋ค. rcc + enter -> ํด๋์คํ ์ปดํฌ๋ํธ ์์ฑ ์ฝ๋ ์์ฑ rsc + enter -> ํจ์ํ ์ปดํฌ๋ํธ ์์ฑ ์ฝ๋ ์์ฑ 1.
10์ฅ์์ ๋ง๋ค์๋ To-do App์์ ๋ฐ์ดํฐ๊ฐ ๋ง์์ง๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ ค์ง ๊ฒ์ด๋ค. App.jsํ์ผ์ ์ข ์์ ํด์ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ๋ ๋๋ง ํด๋ณด์!useState์ ๊ธฐ๋ณธ๊ฐ์ createBulkTodos()๋ก ์ง์ ํ๋ฉด, ๋ฆฌ๋ ๋๋ง ๋ ๋๋ง๋ค createBulkTodosํจ์
์ปดํฌ๋ํธ์์ ์ํ๋ฅผ ์ ๋ฐ์ดํธ ํ ๋๋ ๋ถ๋ณ์ฑ์ ์ ์งํ๋ฉด์ ์ํ๋ฅผ ์ ๋ฐ์ดํธ ํ๋๊ฒ์ด ์ค์ํ๋ค. ๋ถ๋ณ์ฑ์ด ์ง์ผ์ง์ง ์์ผ๋ฉด ๊ฐ์ฒด ๋ด๋ถ์ ๊ฐ์ด ๋ฐ๊ปด๋ ๊ฐ์ง๋ฅผ ๋ชปํ๊ธฐ ๋๋ฌธ์ด๋ค. // immer ์ค์น$ yarn add immer์ฌํ๊น์ง๋ ๊ธฐ์กด์ ๊ฐ์ ์ ์งํ๋ฉด์ ์ํ๋ ๊ฐ์ ์๋ก ์ง
๋ฆฌ์กํธ ๋ผ์ฐํฐ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์์ ๋ผ์ฐํ ์ ๊ฐ๋จํ๊ฒ ๊ตฌํํ๋๋ก ๋์์ค๋ค. >// ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น $ yarn add react-router-dom 1. ๋ผ์ฐํฐ ์ ์ฉ ํ๋ก์ ํธ index.jsํ์ผ์์ react-router-dom์ BrowseRouter ์ปดํฌ๋ํธ
1. axios๋ก API ํธ์ถํด์ ๋ฐ์ดํฐ ๋ฐ์์ค๊ธฐ axios๋ ์๋ฐ์คํฌ๋ฆฝํธ HTTP ํด๋ผ์ด์ธํธ์ด๋ค. axios ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ HTTP์์ฒญ์ Promise ๊ธฐ๋ฐ์ผ๋ก ์ฒ๋ฆฌํ๋ค. ์ฐธ๊ณ ๋ก Promise๋ ์ฝ๋ฐฑ์ง์ฅ ์ฝ๋๊ฐ ์์ฑ๋์ง ์๋๋กํ๋ ๊ธฐ๋ฅ์ด๋ค. > // axios ๋ผ์ด