Hooks
여러분 후크 선장을 아십니까? 뜬금없지만 가끔 후크하면 피터팬에 나온 해적 선장이 떠오르곤 합니다.
손에 달린 갈고리 같은 것을 장착한 후크 선장을 생각해봤습니다. 거기에 s가 붙어있네요. 여러개의 갈고리로 생각해보고 접근해보겠습니다.
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/011.gif)
기존 react에서는 클래스형 컴포넌트로 개발이 주로 이루어졌습니다. 함수형 컴포넌트에는 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 없었습니다.
그런데, Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 추가되었죠. 현재는 대부분 함수형 컴포넌트 위주의 개발을 하게 됩니다.
이 Hooks는 컴포넌트의 상태관리 변수를 생성하는 useState가 있고, 렌더링 직후의 동작을 지정할 수 있는 useEffect 등과 같은 기능을 제공해주는 라이브러리를 갖고 있습니다. 여기서는 useEffect부터 하나씩 살펴보겠습니다.
useEffect
컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 할 수 있는 Hook 입니다. 처음 렌더링될 때와 리렌더링될 때 지정된 작업을 수행합니다.
useEffect(() => {
//렌더링 시 실행될 작업
}, []);
상태값의 변화에 따라 작업을 실행할 것인지 결정할 수 있습니다. 참고로 위 코드에서 처럼 [] 으로 빈칸이면, 초기 렌더링시에 수행하는 작업이 실행됩니다.
react는 거의 대부분 비동기로 동작하는 데 동작하는 시점을 동기화하여 맞춰줄 때 이 useEffect를 사용할 수 있습니다. useEffect에서 cleanup메소드를 반환하면 state 값이 변경되기 직전에 실행될 내용을 작성할 수 있습니다. 위 코드와 함께 작성해서 순서 있는 작업을 만들어볼 수도 있겠죠?
useEffect(() => {
return () => {
//cleanup 메소드
//state 값이 변경되기 전에 실행될 내용 작성
}
}, [state]);
useReducer
컴포넌트의 상황에 따라 state 값을 다른 값으로 업데이트하고 싶을 때 사용하는 Hook 입니다. useReducer는 현재 state 값과 업데이트를 위해 필요한 정보를 담고 있는 액션을 매개변수로 받아서 사용합니다.
function reducer(state, action) {
//action의 타입에 따라서 실행될 내용 작성
}
const [state, dispatch] = useReducer(reducer, {
//state의 초기값
});
마지막으로, dispatch는 action을 실행시키는 메소드입니다. dispatch(action) => action을 발생시키면서 reducer로 지정된 메소드를 호출한다.
참고로, reducer로 지정될 메소드는 컴포넌트 밖에다가 선언합니다.
'네이버 클라우드 캠프 > React' 카테고리의 다른 글
[React] Component Styling (0) | 2023.07.20 |
---|---|
[React] Hooks(2) (0) | 2023.07.20 |
[React] 컴포넌트 (0) | 2023.07.19 |
[React] 리액트와 JSX 소개 (0) | 2023.07.19 |
[React] 리액트 설치 (0) | 2023.07.19 |