React Hooks

정균·2022년 8월 4일

React hooks

React Hooks는 무엇?

클래스 컴포넌트 없이 state를 사용할 수 있는 기능

React Hooks가 필요한 이유?

클래스를 사용한 리액트에서 느끼는 불편함과 문제점을 해결하기 위해 사용 된다

클래스 컴포넌트

더 많은 기능 제공
더 긴 코드 양
더 복잡한 코드
더딘 성능

함수형 컴포넌트

더 적은 기능 제공
더 짧은 코드 양
더 심플한 코드
더 빠른 성능

1. 함수형 컴포넌트에서 리액트 생명주기를 간편하게 다룰수 있다.

리액트의 생명주기

리액트의 생명주기는 크게 Mount, Update, Unmount가 있는데, 이 생명 주기는 클래스 컴포넌트에서만 다룰 수 있었고, 함수형 컴포넌트에서는 다루지 못했었음. 그렇기 때문에 Hooks 이전까지는 함수형 컴포넌트가 더 빠르고 간결한데도 불구하고 클래스 컴포넌트를 사용해왔다.

그러나 Hooks가 등장한 이후로 부터는 함수형 컴포넌트에서도 생명주기를 관리할 수 있기 때문에 함수형 컴포넌트를 사용하게 되었다.

클래스 컴포넌트에서 생명주기 다루는 코드

componenDidMount() {
	// 처음 마운트될 때 updateLists 함수 호출
	this.updateLists(this.props.id)
}
componentDidUpdate(prevProps) {
	// updateLists 함수를 호출할 때
	// id가 달라지면 다시 호출
	if(prevProps.id !== this.props.id) {
		this.updateLists(this.props.id)
	}
}
//updateLists 함수
updateLists = (id) => {
	fetchLists(id)
		.then((lists) => this.setState({
			lists
		}))
}

Hooks를 사용한 생명주기 다루는 코드

useEffect(() => {
	fetchLists(id)
		.then((repos) => {
			setRepos(repos)
		})
}, [id])

위 두 코드는 id가 변경될 경우 새로운 리스트들을 가져와서 리스트 상태를 업데이트 하는 코드이다. 같은 역할을 하는 코드지만 Hooks를 사용한 코드가 훨씬 간결하다.

클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 전부 다르게 처리를 해줘야 하지만 리액트 Hooks를 사용하면 useEffect 하나 안에서 전부 처리해줄 수 있기 때문이다.

useEffect를 사용한 생명주기 관리

useEffect(() => {
	// componentDidMount, componentDidUpdate가 실행 될 때 동작하는 코드 
	console.log("Mount or Update");
	 
	// componentWillUnmount가 실행 될 때 동작하는 코드
	return () => console.log("Unmount");
}, [dependency])

componentDidMount, componentDidUpdate가 동작시에는 useEffect의 함수 중 return을 제외한 코드들을 실행한다.
componentWIllUnmount가 동작시에는 useEffect의 함수 중 return하는 함수가 실행이 된다.

2. HOC 컴포넌트를 Custom React Hooks로 대체할 수 있다.

HOC(Higher Order Component, 고차) 컴포넌트란?

화면에서 재사용 가능한 로직만 분리해서 컴포넌트로 만들고, 재사용 불가능한 부분(UI 등)은 parameter로 받아서 처리하는 방법. 쉽게 말해 코드의 중복을 없애주는 고차 컴포넌트이다.

HOC 컴포넌트의 문제점

복잡한 애플리케이션일 경우 HOC 컴포넌트가 너무 많아지고(인증 HOC, 테마 HOC 등), 이렇게 될 경우 데이터의 흐름을 파악하기 쉽지가 않다.

Custom React Hooks

커스텀 훅을 제작하면 HOC처럼 컴포넌트를 감쌀 필요없이 해당 컴포넌트에서 import 해와서 쉽게 사용 할 수 있다

HOC 컴포넌트를 사용해서 Apage에 유저 fetching하기

// 유저 데이터를 가져오는 고차 컴포넌트
function usersHOC(Component) {
    return class usersHOC extends React.Component {
        state = {
            users: []
        }

        componentDidMount() {
            fetchUsers()
                .then(users => {
                    this.setState({users})
                })
        }
        render() {
            return (
                <Component 
                    {...this.props}
                    {...this.state}
                />
            )
        }
    }
}

function Apage({users}) {
    //...
}

// Apage 위에 유저를 페칭해주는 고차 컴포넌트인 usersHOC를 씌운다
export default usersHOC(Apage)

커스텀 훅을 사용해서 Apage에 유저 fetching 하기

// 유저 데이터를 가져오는 커스텀 훅
function useAuth() {
    const [users, setUsers] = useState([]);
    useEffect(()=> {
        fetchUsers().then(users => {
            setUsers(users);
        });
    }, []);
    return [users];
}

function Apage() {
		// useAuth를 불러옴으로써 간단하게 데이터를 가져온다.
    const [users] = useAuth();
    //...
}