[React] 리액트 훅 사용하기

마이크로 상태 관리를 위해서는 리액트 훅이 필수다.

리액트 훅에는 다음과 같이 상태 관리 방법을 구현하기 위한 몇 가지 기본 리액트 훅이 포함돼 있다.

 

■useState 훅은 지역 상태를 생성하는 기본적인 함수로, 로직을 캡슐화하고 재사용 가능하다는 리액트 훅의 특징이 있다.

그래서 useState를 기반으로 다양한 사용자 정의 훅을 만들 수 있다.

 

■ useReducer 훅도 지역 상태를 생성할 수 있으며, useState를 대체하는 용도로 자주 사용된다.

useState와 useReducer 훅을 다시 살표보고 유사점과 차이점을 알아두자.

 

■ useEffect 훅을 이용하면 리액트 렌더링 프로세스 바깥에서 로직을 실행할 수 있다.

특히 전역 상태를 다루기 위한 상태 관리 라이브러리를 개발할 때 중요한데, 그 이유는 리액트 컴포넌트 생명 주기와

함께 작동하는 기능을 구현할 수 있기 때문이다.

 

const useCount = () => {
	const [count, setCount] = useState(0);
	return [count, setCount];

 }
function useComponent() {

        const [count, setCount] = useCount();

    return(
        <div>
            {count}
            <button onClick={() => setCount((C)=> C+1)}>+1</button>
        </div>
    )

}

 

■ useCount라는 이름을 통해 더 명확해졌다. <-- 로직 추출

■ useComponent가 useCount 구현과 분리됐다.

 

 

이렇게 분리하면 장점이 뭐가 있을까?

■ 사용자 정의 훅을 통해 이름을 적절하게 지정하면 코드의 가독성이 좋아진다.

(구현이 동일하더라도 이름이 다르면 다른 종류의 훅으로 여긴다.)

 

■  마이크로 상태 관리 라이브러리에서도 중요하다.

useCount가 Component에서 분리됐으므로 건드리지 않고 기능을 추가할 수 있다.

const useCount = () => {
 const [count, setCount] = useState(0);
    
    useEffect(() => {// 로그추가, s
    
    	console.log(`count is changed to ${count}`);
        
    }, [count]);// 로그추가, e
    
 return [count, setCount];

 }

이처럼 useCount 로직만 변경해서 디버깅 로그를출력하는 기능을 추가할 수 있다.

컴포넌트를 수정할 필요가 전혀 없다.

 

바로 이 로직을 사용자 정의 훅으로 분리했을 때의 장점이다.

 

■  노드 패키지 매니저(npm)나 깃허브에서 오픈소스로 공개된 다양한 사용자 정의 훅을 찾아 볼 수 있다.

---

서스펜스(suspense)와 동시성 렌더링에 대해서도 알아볼 필요가 있다.

리액트 훅은 서스펜스 혹은 동시성 렌더링과 함께 작동하도록 설계 및 개발됐기 때문이다.