- 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의 값을 반환한다.