React Hook

리액트 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나눌 수 있다. 기존의 클래스형 컴포넌트에서는 여러 문제들이 발생할 수 있다.

클래스형 컴포넌트의 한계점

• 상태 로직의 재사용이 어렵다: 클래스형에서는 상태 관련 로직을 쉽게 재사용하기가 힘들다.
• 코드가 복잡해진다: 다양한 라이프사이클 메서드로 인해 코드가 복잡해지기 쉽다.
• 비슷한 로직이 섞이게 된다: 서로 관련 없는 로직이 섞여 코드의 가독성이 떨어질 수 있다.

이러한 단점을 보완하고자 리액트 16.8 버전부터 Hook이 도입되었다.

Hook이란?

Hook은 함수형 컴포넌트에서 상태와 라이프사이클 기능을 활용할 수 있게 해주는 함수이다. 클래스형 컴포넌트에서는 동작하지 않으며 오직 함수형 컴포넌트에서만 사용 가능하다.

주요 Hook: useState, useEffect

1. useState

• 설명: useState는 컴포넌트의 상태 관리를 위해 사용되는 기본적인 Hook이다.
• 사용법: useState를 사용하면 컴포넌트의 상태를 쉽게 관리할 수 있고, 상태를 업데이트할 때는 set으로 시작하는 업데이트 함수를 호출한다.

예시 코드:

const [count, setCount] = useState(0); // 초기값 설정

이 경우, count는 현재 상태를 나타내고, setCount는 상태를 업데이트하는 함수이다.

2. useEffect

설명: useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정하는 Hook이다.
기능: 컴포넌트가 처음 렌더링될 때와 업데이트될 때 특정 작업을 실행하도록 설정할 수 있다. 클래스형 컴포넌트에서 componentDidMount, componentDidUpdate가 하는 역할을 useEffect가 대신 수행한다고 볼 수 있다.

예시 코드:

useEffect(() => {
    console.log("컴포넌트가 렌더링되었습니다.");
}, [count]); // count가 변경될 때마다 실행됨

위 코드에서 useEffect는 count가 변경될 때마다 실행되며, 의존성 배열에 명시된 값이 업데이트될 때마다 다시 실행된다.

So...

Hook을 사용하면 상태 관리와 라이프사이클 메서드를 보다 직관적으로 작성할 수 있으며, 함수형 컴포넌트에서 복잡한 상태 로직을 쉽게 다룰 수 있다. useState와 useEffect는 리액트 개발에서 필수적인 Hook으로, 함수형 컴포넌트를 더욱 유연하고 간결하게 만들어준다.