๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section4 Unit3 [React] ์‹ฌํ™” - React Hooks ์ ์šฉํ•˜๊ธฐ

๋ฐ˜์‘ํ˜•


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

 

์•„์ฃผ ๊ฐ„๋‹จํ•œ blog ํ”„๋กœ์ ํŠธ


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

 ์‹œ๊ฐ„์ด ์ง€๋‚ ์ˆ˜๋ก ๋‹ค๊ธ‰ํ•ด์ง€๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋‹ค์Œ ๋‹ฌ๋ถ€ํ„ฐ ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐ€๋Š”๋ฐ, ์ด๋ ‡๊ฒŒ ํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ž˜ ํ•ด๋‚ผ์ˆ˜ ์žˆ์„๊นŒ, ๊ฐ‘์ž๊ธฐ ๊ฑฑ์ •์ด ๋˜์—ˆ๋‹ค. ์ฒ˜์Œ์—” ์–ด๋Š ์ •๋„ ๋„๋„ํ–ˆ๋˜ ๊ณผ์ •์ด, ์ด์ œ๋Š” ์ƒˆ๋กœ์šด ๊ฒƒ๋“ค๋„ ๋ฐฐ์šฐ๊ณ , ๋ชฐ๋ž๋˜ ๋ถ€๋ถ„๋„ ์•Œ๊ฒŒ๋˜๋ฉด์„œ ๊ณต๋ถ€ํ•ด์•ผ ํ•  ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๋ฐฉ๋Œ€ํ•ด์กŒ๋‹ค. ๋„๋„ํ•  ๋•Œ ์˜ˆ์Šต ์ข€ ๋งŽ์ด ํ•ด๋’€์–ด์•ผ ํ–ˆ๋‚˜, ์‚ด์ง ์•„์‰ฝ๊ธฐ๋„ ํ•˜๋‹ค.

 ๋‹ค๋“ค ๊ณต๋ถ€ํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ค๋ฅธ ๊ฒƒ ๊ฐ™๋‹ค. ์–ด๋–ค ๊ฒƒ์„ ๋” ์ค‘์ ์— ๋‘๋Š”์ง€, ์–ด๋–ค ๋ถ€๋ถ„์€ ์ข€ ์†Œํ™€ํ•œ์ง€, ์ปค๋ฆฌํ˜๋Ÿผ์— ์žˆ๋Š” ๋‚ด์šฉ์ด์ง€๋งŒ ๊ทธ๋ƒฅ ์ง€๋‚˜์น˜๊ธฐ๋„ ํ•˜๊ณ , ๋˜๋Š” ์ง„๋„๋ฅผ ๋”ฐ๋ผ๊ฐ€๋Š๋ผ ํ•˜๋ฃจ๊ฐ€ ๋ถ€์กฑํ•œ ์‚ฌ๋žŒ๋„ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ์–ด๋Š ๊ฒƒ์ด ๋˜์—ˆ๋“  ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋ณธ์ธ๋งŒ์˜ ๋ฐฉ์‹์œผ๋กœ ์—ด์‹ฌํžˆํ•˜๊ณ  ์žˆ๋‹ค๋Š”๊ฒŒ ์˜คํ”„๋ผ์ธ ์ˆ˜์—…์ด์ง€๋งŒ ๋Š๊ปด์ง€๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋Ÿฐ ๊ฒƒ๋“ค์ด ๋Š๊ปด์ง€๋ฉด ๋‚˜๋„ ๋” ์—ด์‹ฌํžˆ ํ•ด์•ผ์ง€, ์ž๊ทน์ด ๋œ๋‹ค.

๋ฐ˜์‘ํ˜•