React Hooks를 사용하는 이유

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

React에서 컴포넌트를 만드는 2가지 방식

클래스 컴포넌트와 함수 컴포넌트

이전 챕터에서 React Hooks는 함수 컴포넌트와 관련이 있다고 했다.
리액트에서는 컴포넌트를 만드는 방식이 크게 2개 클래스, 함수가 있는데 React Hooks는 함수 컴포넌트에서 사용하는 리액트의 내장(built-in) 함수이기 때문이다.

그렇다면 클래스 컴포넌트를 쓰면 React hooks는 배울 필요가 없지 않나? 라는 생각이 들 수도 있다. 아래에서 왜 React Hooks를 배울 필요가 있는지 알아보겠다.

함수 컴포넌트를 쓰는 이유

React hooks를 사용하려면 함수 컴포넌트를 써야한다. 그래서 React hooks를 쓰는 이유를 알려면 왜 함수 컴포넌트를 쓰는지에 대해 먼저 이해할 필요가 있다고 본다.

클래스 컴포넌트는 컴포넌트를 하위 컴포넌트들로 분리할 수 없기 때문에 컴포넌트가 거대해지면 이해하기 어렵게 된다. 하지만 함수 컴포넌트의 경우에는 여러 하위 함수 컴포넌트들로 분리하여 사용할 수 있다.

React hooks

hooks는 왜 use-로 시작하는가?

React Hooks는 lifecycle 함수나 state, context같은 React 라이브러리의 기능들을 사용(Use)할 수 있게 해주기 때문에 그 의미로 useEffect, useState같이 use로 시작한다고 한다.

hooks는 컴포넌트를 더 간결하게 만들고 가독성을 높여준다.

직접적인 비교를 위해 Counter 컴포넌트의 클래스 컴포넌트와 함수 컴포넌트 코드를 가져왔다.

클래스 컴포넌트

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = {
        	count: 1,
        }
    }
    render() {
        return (
            <div>
                The Current Count: {this.state.count}
                <div>
                <button onClick={this.setState({ count: this.state.count - 1 })}>
                	add
                </button>
                <button onClick={this.setState({ count: this.state.count + 1 })}>
                	subtract
                </button>
                </div>
            </div>
    );
    }
}

함수 컴포넌트

function Counter  ()  {
    const [count, setCount] = useState(1);
    return (
        <div>
            The Current Count: {count}
            <div>
                <button onClick={() => setCount(count + 1)}>add</button>
                <button onClick={() => setCount(count - 1)}>subtract</button>
            </div>
        </div>
    );
};

함수 컴포넌트의 코드가 훨씬 적은 것을 쉽게 알 수 있으며 상태를 세팅하는 것 또한 굉장히 간단해졌음을 알 수있다.

함수 컴포넌트에서 상태 사용시 주의 사항

// 잘못된 상태 설정
<button onClick={setCount(count + 1)}>add</button>

// 올바른 방식
<button onClick={() => setCount(count + 1)}>add</button>

1번째 방식으로 코드를 실행할 경우 웹 페이지를 새로고침만 해도 렌더링을 끝없이 반복하여infinite loop에러가 발생한다.
그 이유는 위 코드가 처리될 때 setCount(count + 1)이 함수 호출이기 때문에 상태를 바꿔버리고 상태를 바꾸다보니 컴포넌트가 다시 렌더링되고 또 해당 코드가 처리되면서 같은 과정을 반복하게 되기 때문이다.

2번째 방식에서는 () => setCount(count + 1)로 함수 호출이 아닌 함수 선언이기 때문에 해당 코드가 처리될때 함수 호출이 일어나지 않는다. 따라서, 웹페이지 새로 고침만으로는 setCount()가 실행될 일도 없기 때문에 렌더링 반복이 발생하지 않는다.