[React] Hooks(1)

react

Hooks

 

여러분 후크 선장을 아십니까? 뜬금없지만 가끔 후크하면 피터팬에 나온 해적 선장이 떠오르곤 합니다.

손에 달린 갈고리 같은 것을 장착한 후크 선장을 생각해봤습니다. 거기에 s가 붙어있네요. 여러개의 갈고리로 생각해보고 접근해보겠습니다.

 기존 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로 지정될 메소드는 컴포넌트 밖에다가 선언합니다.