- Published on
React Hooks Api (1)
- Author
- Name
- yceffort
Hooks API
Hook์ react 16.8์์ ์ถ๊ฐ๋ ๊ฐ๋ ์ผ๋ก, Hook์ ์์ฉํ๋ฉด class๋ฅผ ๊ฐ์ฑํ์ง ์์๋ state๊ด๋ฆฌ์ ๊ฐ์ react์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค.
๊ธฐ๋ณธ Hook
useState
const [state, setState] = useState(initialState)
setState(newState)
์ํ ์ ์ง๊ฐ, ๊ทธ๋ฆฌ๊ณ ๊ทธ ๊ฐ์ ์์ ํ๋ ํจ์๋ฅผ ๋ฐํํ๋ค. ์ด์ ์ state
๊ฐ์ ๋ฐ์๋ค๊ฐ ์์ ํ ์๋ ์๋ค.
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount)
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
<button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
</>
)
}
๋์ผํ ๊ฐ์ผ๋ก ๊ฐฑ์ ํ๋ ๊ฒฝ์ฐ(Object.is
) ๊ฐ์ด ์
๋ฐ์ดํธ ํ์ง ์๊ณ ์ฒ๋ฆฌ๋ฅผ ์ข
๋ฃํ๋ค.
useEffect
useEffect(didUpdate)
ํ๋ฉด์ ๋ ๋๋ง์ด ์๋ฃ๋ ์ดํ์ ์ํํ๋ค. ๋ํ, ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์์ ์ ๊ฑฐ ๋ ๋ ์ ๋ฆฌ ํด์ผํ ๋ฆฌ์์ค๋ ์ ์ธํ ์ ์๋ค.
useEffect(() => {
const subscription = props.source.subscribe()
return () => {
subscription.unsubscribe()
}
})
unsubscribe
๋ ์ด์ ui์์ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ง์ ์ ์ํํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ง์ฝ, ์ปดํฌ๋ํธ๊ฐ ์ฌ๋ฌ๋ฒ ๋ ๋๋ง ๋๋ค๋ฉด ๋ค์ effect๊ฐ ์ํ๋๊ธฐ ์ ์ ์ด์ effect๊ฐ ์ ๋ฆฌ๋๋ค.
๋ง์ฝ ์กฐ๊ฑด๋ถ๋ก ์คํํ๊ธฐ ์ํด์๋ ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ์ ํ์ฉํ ์๋ ์๋ค.
useEffect(() => {
const subscription = props.source.subscribe()
return () => {
subscription.unsubscribe()
}
}, [props.source])
๊ทธ๋ผ ์ด์ props.source
๊ฐ์ด ๋ณ๊ฒฝ ๋ ๋ ๋ง useEffect
๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค.
useContext
Context
context
๋ฅผ ์ด์ฉํ๋ฉด, ๋งค๋ฒ ์ผ์ผ์ด props๋ฅผ ๋๊ฒจ์ฃผ์ง ์์๋, ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ์ฒด์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ ์ ์๋ค. ์ฆ, context๋ react ์ปดํฌ๋ํธ ํธ๋ฆฌ์์์ ์ ์ญ์ ์ผ๋ก ๋์ดํฐ๋ฅผ ๊ณต์ ํ ์ ์๋๋ก ๊ณ ์๋ ๋ฐฉ๋ฒ์ด๋ค.
<Page user={user} avatarSize={avatarSize} />
<PageLayout user={user} avatarSize={avatarSize} />
<NavigationBar user={user} avatarSize={avatarSize} />
<Link href={user.permalink}>
<Avatar user={user} size={avatarSize} />
</Link>
</NavigatorBar>
</PageLayout>
</Page>
์ค์ ๋ก user
์ avatarSize
๋ฅผ ์ฌ์ฉํ๋ ๊ณณ์ Link
์ปดํฌ๋ํธ ์ธ๋ฐ, page ์จ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ๊ฑฐ์น๋ฉด์ ๊ฐ์ ๋ด๋ ค์ฃผ๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด๊ฒ ๋ ์ฌํด์ง๋ ๊ฒฝ์ฐ, ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ํธ๋ฆฌ์์ ์ฌ๋ฌ ๋ ๋ฒจ์ ์ปดํฌ๋ํธ์๊ฒ ์ฃผ์ด์ผ ํ ๋๋ ์๋ค. ์ด๋ ๊ฒ ๋ฐ์ดํฐ๊ฐ ๋ณํ ๋ ๋ง๋ค ๋ชจ๋ ํ์ ์ปดํฌ๋ํธ์๊ฒ ํด๋น ๊ฐ์ ์๋ ค์ฃผ๋ ๊ฒ์ด context
์ด๋ค.
const MyContext = React.createContext(defaultValue)
Context๊ฐ์ฒด๋ฅผ ๋ง๋ ๋ค. Context ๊ฐ์ฒด๋ฅผ ๊ตฌ๋
ํ๊ณ , ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง ํ ๋ ํธ๋ฆฌ ์์์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์ง์ด ๋ง๋ Provider
๋ก ๋ถํฐ ํ์ฌ ๊ฐ์ ์ฝ๋๋ค. ์ฌ๊ธฐ์ ์ ์ธ๋ defaultValue
๋ ํธ๋ฆฌ์์์ ์ ์ ํ Provider๋ฅผ ์ฐพ์ง ๋ชปํ์ ๋์๋ง ์ฐ๋ ๊ฐ์ด๋ค.
<MyContext.provider value="{someValue}">
<SomeComponent />
</MyContext.provider>
Provider
๋ context๋ฅผ ๊ตฌ๋
ํ๋ ์ปดํฌ๋ํธ๋ค์๊ฒ context์ ๋ณํ๋ฅผ ์๋ฆฌ๋ ์ญํ ์ ํ๋ค. Provider
๋ value์ ์๋ prop
์ ๋ฐ์์ ์ด ๊ฐ์ ํ์ ์ปดํฌ๋ํธ์ ์ ๋ฌํ๋ค.
<MyContext.Consumer>
{value => /* context ๊ฐ์ ์ด์ฉํ ๋ ๋๋ง */}
</MyContext.Consumer>
context ๋ณํ๋ฅผ ๊ตฌ๋
ํ๋ React Component๋ค. ๋ฐ๋์ Context.Consumer
์ ์์์ ํจ์์ฌ์ผ๋ง ํ๋ค. ์ด ํจ์๋ context์ ํ์ฌ ๊ฐ์ ๋ฐ๊ณ , React ๋
ธ๋๋ฅผ ๋ฐํํด์ผ ํ๋ค.
const value = useContext(MyContext)
๋ฅผ ์ฌ์ฉํ๋ฉด, context๊ฐ์ฒด๋ฅผ ๋ฐ์์, ํ์ฌ context์ ๊ฐ์ ๋ฐํํ๋ค.