Section4 Unit3 [React] ์ฌํ - React Hooks ์ ์ฉํ๊ธฐ
โญ๏ธ ๊ณผ์ . React Hooks ์ ์ฉํ๊ธฐ
โ Bare Minimum Requirement
โ๏ธ json-server ์ค์น
โ๏ธ ์์ธ ์ปดํฌ๋ํธ ๊ตฌํํ๊ธฐ
- App.js
react.lazy()์ suspense ์ฌ์ฉ
- BlogDetail.js
createBlog.js
CRUD ๊ตฌํ
- useFetch.js
custom hook ๋ง๋ค๊ธฐ
โ Advanced
โ๏ธ ๋ธ๋ก๊ทธ ๊ธ ํด๋ฆญํด์ ๋ค์ด๊ฐ์ ๋ ์คํฌ๋กค ๋งจ ์๋ก ์ ์ฉ๋๋ ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ
โ๏ธ custom hook๊ณผ custom component ๋ง๋ค๊ธฐ
๋๋ฆ ์ฌ๋ฏธ์์๋ ์ด๋ฒ ๊ณผ์ . ๋ด๊ฐ ํ ๋ฐฉ๋ฒ์ด ๋ง๋๊ฑด์ง, ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์๋์ง ์ ๋ชจ๋ฅด๊ฒ ๋๋ฐ (ํนํ custom hook์ ๋ง๋๋ ๋ถ๋ถ) ์์ง ํด์ค ๊ฐ์๋, ๋ ํผ๋ฐ์ค ์ฝ๋๋ ์ ๊ณต๋์ง ์์์ ํ์ธ์ ๋ชปํ๊ณ ์์ง๋ง ๊ธฐ๋ฅ ๊ตฌํ์ ์๋ฃํ๋ค.
๐ Github Repository fe-sprint-react-hooks
๐ ์ค๋์ ํ๊ณ
์๊ฐ์ด ์ง๋ ์๋ก ๋ค๊ธํด์ง๋ ๊ฒ ๊ฐ๋ค. ๋ค์ ๋ฌ๋ถํฐ ํ๋ก์ ํธ์ ๋ค์ด๊ฐ๋๋ฐ, ์ด๋ ๊ฒ ํด์ ํ๋ก์ ํธ๋ฅผ ์ ํด๋ผ์ ์์๊น, ๊ฐ์๊ธฐ ๊ฑฑ์ ์ด ๋์๋ค. ์ฒ์์ ์ด๋ ์ ๋ ๋๋ํ๋ ๊ณผ์ ์ด, ์ด์ ๋ ์๋ก์ด ๊ฒ๋ค๋ ๋ฐฐ์ฐ๊ณ , ๋ชฐ๋๋ ๋ถ๋ถ๋ ์๊ฒ๋๋ฉด์ ๊ณต๋ถํด์ผ ํ ๋ด์ฉ์ด ๋๋ฌด ๋ฐฉ๋ํด์ก๋ค. ๋๋ํ ๋ ์์ต ์ข ๋ง์ด ํด๋์ด์ผ ํ๋, ์ด์ง ์์ฝ๊ธฐ๋ ํ๋ค.
๋ค๋ค ๊ณต๋ถํ๋ ๋ฐฉ์์ด ๋ค๋ฅธ ๊ฒ ๊ฐ๋ค. ์ด๋ค ๊ฒ์ ๋ ์ค์ ์ ๋๋์ง, ์ด๋ค ๋ถ๋ถ์ ์ข ์ํํ์ง, ์ปค๋ฆฌํ๋ผ์ ์๋ ๋ด์ฉ์ด์ง๋ง ๊ทธ๋ฅ ์ง๋์น๊ธฐ๋ ํ๊ณ , ๋๋ ์ง๋๋ฅผ ๋ฐ๋ผ๊ฐ๋๋ผ ํ๋ฃจ๊ฐ ๋ถ์กฑํ ์ฌ๋๋ ์๋ ๊ฒ ๊ฐ๋ค. ์ด๋ ๊ฒ์ด ๋์๋ ๋ง์ ์ฌ๋๋ค์ด ๋ณธ์ธ๋ง์ ๋ฐฉ์์ผ๋ก ์ด์ฌํํ๊ณ ์๋ค๋๊ฒ ์คํ๋ผ์ธ ์์ ์ด์ง๋ง ๋๊ปด์ง๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ฐ ๊ฒ๋ค์ด ๋๊ปด์ง๋ฉด ๋๋ ๋ ์ด์ฌํ ํด์ผ์ง, ์๊ทน์ด ๋๋ค.
'Frontend Dev > ๐ฅ ์ฝ๋์คํ ์ด์ธ FE ๋ถํธ์บ ํ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Section4 Unit4 [UX/UI] Design System - ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ (0) | 2023.07.25 |
---|---|
Section4 Unit4 [UX/UI] Design System (0) | 2023.07.21 |
Section4 Unit3 [React] ์ฌํ - ์ฝ๋๋ถํ ๊ณผ React.lazy() & Suspense (0) | 2023.07.20 |
Section4 Unit3 [React] ์ฌํ - Virtual DOM๊ณผ React Hooks (0) | 2023.07.18 |
Section4 Unit2 [์๋ก ํ๋ก์ ํธ] COZ Shopping (0) | 2023.07.11 |