์์ ํ๋ฉด์ ์ฌ์ฉํ ์ปค์คํ ํ
- ์คํ ๋ฆฌ๋ถ์ ํตํ ๊ฐ๋ฐํ๊ฒฝ
- Lint (ES, TS)
- ๊ตณ์ด react-app-config๋ฅผ ์ด์ฉํ ํ์๊ฐ ์์๊น? ์ด์ฐจํผ hook๋ง ์ฒดํฌํ ๊ฑด๋ฐ.. -> ๊ฑ eslint, ts recommend๋ก ํจ
- test ํ๊ฒฝ ๊ตฌ์ถ
- ์คํ ๋ฆฌ๋ถ ์ปดํ์ผ๋ฌ ts-loader์ธ๋ฐ, ๊ฑ babel๋ก ํต์ผํ์.
- rollup์ ํตํ ๋น๋
function renderHook(
callback: function(props?: any): any,
options?: RenderHookOptions
): RenderHookResult
์ ๊ณต๋ callback
์ every render๋ง๋ค ํธ์ถํ๋ ํ
์คํธ์ฉ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋ํ๋ค. ์ฝ๋ฐฑ์ hook์ ์ ๋ฌํด๋ ๋๋ค.
callback
- ๋ง์ฝ new props์ด rerender call์์ ์ ๊ณต๋์ง ์๋๋ค๋ฉด ์ฝ๋ฐฑ์ ์ ๋ฌ๋
props
๋options
์initialProps
์ด๋ค.
rederHook Result ๊ฐ์ฒด
renderHook์ ๋ฐํ๊ฐ ์ธํฐํ์ด์ค
export interface HookResult<R> {
readonly current: R;
readonly error: Error;
}
export interface RenderHookResult<P, R> {
readonly result: HookResult<R>;
readonly waitForNextUpdate: () => Promise<void>;
readonly unmount: () => boolean;
readonly rerender: (newProps?: P) => void;
}
{
current: any,
error: Error
}
current
๊ฐ or result
๋ renderHook
์ ์ ๋ฌ๋ ์ฝ๋ฐฑ์์ ๋ฐํ ๋ ๋ชจ๋ ๋ด์ฉ์ ๋ฐ์ํ๋ค. thrown value๋ error ๊ฐ์ ๋ฐ์๋๋ค.
rerender
function rerender(newProps? : any): void
hook์ ์ฌ์ฐ์ฐ ์ํค๊ณ , ํ
์คํธ ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋ํ๋ค. ๋ง์ฝ newProps
๊ฐ ์ ๋ฌ๋๋ค๋ฉด, callback
์ ์ ๋ฌ๋ initialProps
์ ๋์ฒดํ ๊ฒ์ด๋ค.
DocsPage๋ ์ปดํฌ๋ํธ ์คํ ๋ฆฌ์ ๋ํ ์ ๋ก ์ปจํผ๊ทธ, docgen comments, props table์ ๊น๋ํ๊ฒ ๋ณด์ฌ์ค
MDX. ๊ธด ํ์์ ๋งํฌ๋ค์ด ๋ฌธ์ ์คํ ๋ฆฌ๋ฅผ ํ๋์ ํ์ผ๋ก ์์ฑ๊ฐ๋ฅ.