์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - Custom Hook โ๏ธ Custom Hook ์์ ๊ฒ์๊ธ์์ ๋ค์ํ Hook์ ์ฌ์ฉํด์๋ค. React์๋ useState, useContext, useEffect์ ๊ฐ์ ์ฌ๋ฌ ๋ด์ฅ Hook์ด ํจ๊ป ์ ๊ณต๋๋ค. ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋, ์ฌ์ฉ์๊ฐ ์จ๋ผ์ธ ์ํ์ธ์ง ์ถ์ ํ๊ฑฐ๋ ์ฑํ
๋ฐฉ์ ์ฐ๊ฒฐํ๋ ๋ฑ ์ข ๋ ๊ตฌ์ฒด์ ์ธ ๋ชฉ์ ์ ์ํด Hook์ด ์์์ผ๋ฉด ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค. React์์ ์ด๋ฌํ Hook์ ๋ชจ๋ ์ง์ํ ์ ์๋ค. ๊ทธ๋์ ์ดํ๋ฆฌ์ผ์ด์
์๊ตฌ์ฌํญ์ ๋ง๊ฒ ์ง์ ์์ ๋ง์ Hook์ ๋ง๋ค ์ ์๋ค. ๐ง ์ ์ฌ์ฉํ ๊น? ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ฝ๋๊ฐ ๊ฐ๊ฒฐํด์ง๋ค. ๋ด์ฅ Hook์ ์ฌ์ฉํ ์ ์๋ค. ๋
๋ฆฝ์ ์ผ๋ก ๋์ํ๋ค. ๐ก ๊ตฌ์ฑ์์ ๊ฐ ๋
ผ๋ฆฌ ๊ณต์ ๋คํธ์ํฌ์ ํฌ๊ฒ ์์กดํ๋ ์ฑ์ด ์๋ค๊ณ ์์ํด๋ณด์. ..
REACT
์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - useContext ๐ useContext useContext๋ ์ปดํฌ๋ํธ์ Context๋ฅผ ์ฝ๊ณ ๊ตฌ๋
ํ๊ฒ ํด์ฃผ๋ ๋ฆฌ์กํธ Hook์ด๋ค. ๋ฆฌ์กํธ์์ ๋ฐ์ดํฐ๊ฐ์ ํ์ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๊ธฐ ์ํด ์ปดํฌ๋ํธ ํธ์ถ ์, ๋ฐ์ดํฐ prop์ ๋ด๊ณ , ํด๋น props๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ค. useContext๋ ํด๋น ๊ณผ์ ์ ์๊ด์์ด useContext๋ก ๊ฐ์ผ ์ปดํฌ๋ํธ๋ค์ ํด๋น ๋ฐ์ดํฐ๋ฅผ ์ ๊ทผํ ์ ์๋๋ก ๋์์ค๋ค. ๋น์ทํ ๊ธฐ๋ฅ์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก๋ recoil์ด ์๋ค. ๐ฆ Parameter useContext ์ปจํ
์คํธ๋ฅผ ์ฝ๊ณ ๊ตฌ๋
ํ๋ ค๋ฉด ์ปดํฌ๋ํธ ์ต์์์์ ํธ์ถํด์ผํ๋ค. const value = useContext(SomeContext); • SomeContext: ํด๋น ์ปจํ
์คํธ๋ cr..
์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - useCallback • ๋ณ์ฝ๋ฉ๋์ youtube - useCallback ๊ฐ์ ๐ชฃ useCallback useCallback์ ์ฌ๋ ๋๋ง ์ฌ์ด์ ํจ์ ์ ์๋ฅผ ์บ์ํ ์ ์๋ React Hook์ด๋ค. ๐ข ์ฐธ์กฐ useCallback ์ฌ๋ ๋๋ง ์ฌ์ด์ ํจ์ ์ ์๋ฅผ ์บ์ํ๋ ค๋ฉด ๊ตฌ์ฑ ์์์ ์ต์์ ์์ค์์ ํธ์ถํ๋ฉด ๋๋ค. const cachedFn = useCallback(fn, [dependencies]); ๐ฆ Parameters • fn: ์บ์ํ๋ ค๋ ํจ์์ด๋ค. ๋ชจ๋ ์ธ์๋ฅผ ์ทจํ๊ณ ๋ชจ๋ ๊ฐ์ ๋ฐํํ ์ ์๋ค. React๋ ์ด๊ธฐ ๋ ๋๋ง ์ค์ ํจ์๋ฅผ ๋ค์ ๋ฐํํ๋ค(ํธ์ถX). ๋ค์ ๋ ๋๋ง์์ dependencies๊ฐ ๋ณ๊ฒฝ๋์ง ์์ ๊ฒฝ์ฐ ๋์ผํ ๊ธฐ๋ฅ์ ๋ค์ ์ ๊ณตํ๋ฉฐ, ๊ทธ๋ ์ง ์๋ค๋ฉด ..
์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - useMemo ๐ useMemo useMemo๋ ์ฌ๋ ๋๋ง ๊ฐ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ *์บ์(Cache)ํ ์ ์๋ React Hook์ด๋ค. ๋น์ฉ์ด ๋ง์ด ๋๋ ์ฌ๊ณ์ฐ์ ๊ฑด๋๋ฐ๊ธฐ ์ํ์ฌ ์ฌ์ฉํ๋ค. *์บ์(Cache): ์ปดํจํฐ ๊ณผํ์์ ๋ฐ์ดํฐ๋ ๊ฐ์ ๋ฏธ๋ฆฌ ๋ณต์ฌํด ๋๋ ์์ ์ฅ์๋ก ๋ฐ์ดํฐ ์ ๊ทผํ๋ ์๊ฐ์ด ์ค๋๊ฑธ๋ฆฌ๊ฑฐ๋ ๋ค์ ๊ณ์ฐํ๋ ์๊ฐ์ ์ ์ฝํ๊ณ ์ถ์ ๊ฒฝ์ฐ์ ์ฌ์ฉ ์ถ์ฒ: Wikipedia ๋ฐํ๊ฐ์ ์บ์ฑํ๋ ๊ฒ์ ๋ฉ๋ชจ์ด์ ์ด์
(memoization)์ด๋ผ๊ณ ๋ ํ๋ฉฐ, ์ด๊ฒ์ด ์ด Hook์ด ๋ถ๋ฆฌ๋ ์ด์ ์ด๋ค. ๐ข ์ฐธ์กฐ useMemo ์ฌ๋ ๋๋ง ๊ฐ์ ๊ณ์ฐ์ ์บ์ํ๋ ค๋ฉด ๊ตฌ์ฑ ์์์ ์ต์์ ์์ค์์ ํธ์ถํ๋ค. const cachedValue = useMemo(calculateValue, [depende..
์ฐธ๊ณ ์ฌ์ดํธ • React ๊ณต์ ๋ฌธ์ - useRef ๐ชฃ useRef ๋ ๋๋ง์ด ํ์ํ์ง ์์ ๊ฐ์ ์ฐธ์กฐํ ์ ์๋ React Hook์ด๋ค. useRef๋ .current ํ๋กํผํฐ๋ก ์ ๋ฌ๋ ์ธ์(initialValue)๋ก ์ด๊ธฐํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ref ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. ๋ฐํ๋ ๊ฐ์ฒด๋ ์ปดํฌ๋ํธ์ ์ ์์ ์ฃผ๊ธฐ๋ฅผ ํตํด ์ ์ง๋๋ค. ๐ฆ Parameter • initialValue: ์ด๊ธฐ์ ์ ์ฅ๋๋ ๊ฐ์ ๋ฃ์ผ๋ฉฐ, ๋ชจ๋ ์ ํ์ ๊ฐ์ด(lite, DOM...)์ด ๋ ์ ์๋ค. ์ด ์ธ์๋ ์ด๊ธฐ ๋ ๋๋ง ํ์ ๋ฌด์๋๋ค. ๐ Return useRef๋ ๋จ์ผ ์์ฑ์ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. {current: value} • current: initialValue๊ฐ์ด ๋ค์ด๊ฐ ์์ผ๋ฉฐ null์ ์ฌ์ฉํด๋ ๋๋ค. ํฅํ ๋ค๋ฅธ ๊ฒ์ผ๋ก ์ค์ ํ ์ ..
๐ useEffect useEffect()๋ ํ์ด์ง์ ๋ง์ดํธ, ์ธ๋ง์ดํธ, ์
๋ฐ์ดํธ ์ ์์
์ ์ค์ ํ๋ค. ์ฉ์ด ์ค๋ช
Mount ์ปดํฌ๋ํธ๊ฐ ํ์ด์ง์ ๋ํ๋จ unMount ์ปดํฌ๋ํธ๊ฐ ํ์ด์ง์์ ์ฌ๋ผ์ง ์
๋ฐ์ดํธ๋ useEffect() ํน์ ๊ฐ์ ์์กดํ์ฌ ํด๋น ๊ฐ์ด ๋ณ๊ฒฝ, ์คํ๋๋ฉด ํด๋น useEffect()๋ฅผ ์ฌ์คํํ๋ค. useEffect()์ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ๋ค. useEffect(()=> { // ๋ง์ดํธ ์๋ฃ ํ ์คํํ ์ฝ๋ return () => { // ์ธ๋ง์ดํธ ์๋ฃ ํ ์คํํ ์ฝ๋ } }, [dependencies]) ๐ป Code ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ณ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ค. ๐ EffectComponent.tsx import React, { useEffect, useState } from 'react..
๐จ๐ป๐ผ useState ํน์ ๊ฐ์ useState()๋ก ์ ์ธํ์ฌ์ ๊ฐ์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ , ํด๋น ๊ฐ์ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ํ๋ฉด์ ๋ฆฌ๋ ๋๋งํ์ฌ ํด๋ผ์ด์ธํธ์๊ฒ ๋ณด์ฌ์ค๋ค. ์ด๋, ๋ฆฌ๋ ๋๋ง์ด ์ผ์ด๋๋ ์ปดํฌ๋ํธ์ ์์ ์ปดํฌ๋ํธ๊ฐ ์๋ค๋ฉด, ์์ ์ปดํฌ๋ํธ ๋ํ ๋ค์ ๋ถ๋ฌ์์ง๋ฉด์ ์์ ์ปดํฌ๋ํธ๊น์ง ๋ฆฌ๋ ๋๋ง ๋ฉ๋๋ค. ๐ป Code ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค๊ณ , ๋ค์ ํ์ผ์ ๋ง๋ค์ด์ค๋ค. ๐ StateComponent.tsx import React, { useState } from 'react' export function StateComponent(): JSX.Element { const [num, setNum] = useState(0) const onIncrease = () => setNum(num + 1) const onDec..
์์ฑ์ ๊ฐ๋ฐ ํ๊ฒฝ โ
VScode โ
Mac or Windows ๐ ๏ธ ๋ฆฌ์กํธ ํ๋ก์ ํธ ์์ฑ (CRA) CRA๋ Create-React-App์ ์ฝ์๋ก ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋งํ๋ค. ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ธฐ ์ํด ๋ช
๋ น ํ๋กฌํํธ(CMD) ํน์ >_ Terminal ์ ์ด์ด์ค๋ค. ๊ทธ ๋ค์ ๋ค์ ๋ช
๋ น์ด๋ฅผ ์คํํ๋ค. $ npx create-react-app ์ .์ ๋ฃ์ผ๋ฉด ํ์ฌ ๊ฒฝ๋ก์ ๋ฆฌ์กํธ ํ๋ก์ ํธ๊ฐ ์์ฑ๋๊ณ , ์ ๋ฌธ์๋ฅผ ์์ฑํ๋ฉด ํด๋น ๋ฌธ์๋ฅผ ํด๋๋ช
์ผ๋ก ํ๋ ํด๋๋ฅผ ์์ฑํ์ฌ ๊ทธ ์์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ค. ๋ ํด๋น ํ๋ก์ ํธ์ ์ต์
์ ๋ถ๊ฐํ๋ค. --template typescript๋ฅผ ์์ฑํ๋ฉด ํ์
์คํฌ๋ฆฝํธ์ ํ๋ก์ ํธ๊ฐ ์์ฑ๋๋ค. ์๋ฌด๊ฒ๋ ์์ฑํ์ง ์์ ์ default๋ก JavaScript ํ๋ก์ ํธ๋ฅผ ..