์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - Custom Hook โ๏ธ Custom Hook ์์ ๊ฒ์๊ธ์์ ๋ค์ํ Hook์ ์ฌ์ฉํด์๋ค. React์๋ useState, useContext, useEffect์ ๊ฐ์ ์ฌ๋ฌ ๋ด์ฅ Hook์ด ํจ๊ป ์ ๊ณต๋๋ค. ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋, ์ฌ์ฉ์๊ฐ ์จ๋ผ์ธ ์ํ์ธ์ง ์ถ์ ํ๊ฑฐ๋ ์ฑํ
๋ฐฉ์ ์ฐ๊ฒฐํ๋ ๋ฑ ์ข ๋ ๊ตฌ์ฒด์ ์ธ ๋ชฉ์ ์ ์ํด Hook์ด ์์์ผ๋ฉด ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค. React์์ ์ด๋ฌํ Hook์ ๋ชจ๋ ์ง์ํ ์ ์๋ค. ๊ทธ๋์ ์ดํ๋ฆฌ์ผ์ด์
์๊ตฌ์ฌํญ์ ๋ง๊ฒ ์ง์ ์์ ๋ง์ Hook์ ๋ง๋ค ์ ์๋ค. ๐ง ์ ์ฌ์ฉํ ๊น? ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ฝ๋๊ฐ ๊ฐ๊ฒฐํด์ง๋ค. ๋ด์ฅ Hook์ ์ฌ์ฉํ ์ ์๋ค. ๋
๋ฆฝ์ ์ผ๋ก ๋์ํ๋ค. ๐ก ๊ตฌ์ฑ์์ ๊ฐ ๋
ผ๋ฆฌ ๊ณต์ ๋คํธ์ํฌ์ ํฌ๊ฒ ์์กดํ๋ ์ฑ์ด ์๋ค๊ณ ์์ํด๋ณด์. ..
Framework
์ฐธ๊ณ ์ฌ์ดํธ โ ์ฝ๋ฉ์ ํ์ flutter-basic-layout-design ๋ด๊ฐ ์ข์ํ๋ ๊ฐ๋ฐ์ ์ ํ๋ฒ ๐ Scaffold ์ฐ๋ฆฌ๊ฐ ์ฐ๋ ์ฑ์ ๋์์ธ์ ํฌ๊ฒ ์๋จ, ์ค๋จ, ํ๋จ๋ถ๋ก ์ด๋ฃจ์ด์ ธ์๋ค. ์ด๊ฑธ ์ฝ๊ฒ ๊ตฌ์ฑํ๊ณ ์ถ์ผ๋ฉด Scaffold() ์์ ฏ์ ์ฌ์ฉํ๋ฉด ๋๋ค. ๐ท๐ป ๊ตฌ์กฐ MaterialApp( home: Scaffold( appBar: // ์๋จ์ ๋ฃ์ ์์ ฏ, body:// ์ค๋จ์ ๋ฃ์ ์์ ฏ, bottomNavigationBar:// ํ๋จ์ ๋ฃ์ ์์ ฏ, ) ); Scaffold() ์์ ฏ์ 3๊ฐ์ ํ๋ผ๋ฏธํฐ(appBar, body, bottomNavigationBar)๋ฅผ ํตํด ์/์ค/ํ๋ก ๋๋๊ฒ ํด์ค๋ค. appBar(์๋จ), bottomNavigationBar(ํ๋จ)์ ํ์๊ฐ ์๋๊ณ body(์ค๋จ)์ ํ์..
์ฐธ๊ณ ์ฌ์ดํธ โ deku๋์ ํฌ์คํธ๋ฆฌ ๐ฉ Widget Flutter๋ ํ๋ฉด์ ์์ ฏ์์ ์์ํด์ ์์ ฏ์ผ๋ก ๋๋๋ค. widget์ด๋ Flutter์์ ํ๋ฉด์ ํ์๋ ๋ชจ๋ ์์๊ฐ ์์ ฏ์ด๋ฉฐ, ๋์ ๋ณด์ด์ง ์์ง๋ง ํ๋ฉด์ ๊ตฌ์ฑํ๋ ๋ ์ด์์(Layout) ๋ํ ์์ ฏ์ด๋ค. ํ๋ฌํฐ์ ์์ ฏ์ ํฌ๊ฒ 2๊ฐ์ง๊ฐ ์กด์ฌํ๋ค. ๐ถ Stateless Widget ๊ฐ์ ๊ฐ์ง๊ณ ์์ ์ ์์ผ๋ ์ด๋ ํ ๋์์ ํ๋๋ผ๋ ๋ณํ์ง ์๋ ์์ ฏ์ ๋ํ๋ธ๋ค. ํด๋น ์์ ฏ์ Flutter์ StatelessWidget์ ์์๋ฐ์ ์์ฑํ๋ค. ๐ซจ Stateful Widget ์ด๋ ํ ์ํ๊ฐ(๋ฐ์ดํฐ)์ ๊ฐ์ง๊ณ ์๋ค๊ฐ ํด๋น ์ํ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ๋ณ๊ฒฝ์ฌํญ์ ์ธ์งํ๊ณ ํด๋น ์์ ฏ์ ๋ค์ ๊ทธ๋ ค์ค๋ค. (๋ฆฌ-๋ ๋๋ง) ex. TextField, Button, ์๋ฒ๋ก๋ถํฐ ์ ๋ฌ๋ฐ์ ..
๐ ๏ธ Flutter Flutter๋ Google์์ ๊ฐ๋ฐํ๊ณ ์ง์ํ๋ ์คํ ์์ค ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ ํ๋ ์์ํฌ์
๋๋ค. ์ด ์น์
์์๋ Flutter ๊ฐ๋ฐํ๊ฒฝ ์ค์ ์ ๋ํด ์ค๋ช
ํฉ๋๋ค. ๐บ Homebrew ์ค์น Homebrew๋ macOS์ ํจํค์ง ๊ด๋ฆฌ์์
๋๋ค. ํด๋น ํจํค์ง ๊ด๋ฆฌ์๋ฅผ Terminal์์ ๋ช
๋ น์ด๋ฅผ ์ด์ฉํ์ฌ ํจํค์ง๋ฅผ ์ค์นํ๊ณ , ๋๋ถ๋ถ ๋ณ๋์ Path ์ค์ ์์ด ํ๊ฒฝ๋ณ์ ์ค์ ์ ๋์์ค๋๋ค. ๐ง Dart ์ค์น Dart๋ Flutter์ ์ฌ์ฉ๋๋ ๊ฐ๋ฐ ์ธ์ด์
๋๋ค. # Dart์ ์ค์น ์ฌ๋ถ๋ฅผ ํ์ธํฉ๋๋ค. $ brew -v # ์ค์น ์ ๋์ด ์์ ์, $ brew install dart ๐จ Xcode ์ค์น App Store์์ Xcode๋ฅผ ์ค์นํ์ฌ ์๋ฎฌ๋ ์ดํฐ์ ์ฌ์ฉ๋ ์ํํธ์จ์ด๋ฅผ ์ค์นํฉ๋๋ค. ํด๋น ๊ธฐ..
์ฐธ๊ณ ์ฌ์ดํธ • ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ - 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์ ์ฌ์ฉํด๋ ๋๋ค. ํฅํ ๋ค๋ฅธ ๊ฒ์ผ๋ก ์ค์ ํ ์ ..