리액트에서 함수형 컴포넌트로의 전환과 고차 컴포넌트(HOC)의 이해

리액트에서 함수형 컴포넌트로의 전환

리액트는 초기에는 클래스 컴포넌트를 주로 사용했지만, 최근에는 함수형 컴포넌트로 전환되었습니다. 이는 로직 재사용성과 디스(this) 문제를 해결하기 위함입니다.

클래스 컴포넌트에서는 로직 재사용이 어려웠습니다. 예를 들어, 고차 컴포넌트(HOC)를 사용하여 로직을 재사용하려고 하면, 래퍼 헬(wrapper hell) 문제가 발생했습니다. 이는 컴포넌트를 중첩하여 감싸는 구조로 인해 코드가 복잡해지는 문제를 말합니다.

함수형 컴포넌트로 전환하면서 이러한 문제를 해결하기 위해 훅(Hooks)이 도입되었습니다. 훅은 함수형 컴포넌트에서 상태와 생명주기 메서드를 사용할 수 있게 해줍니다.

왜냐하면 클래스 컴포넌트는 디스 바인딩 문제와 로직 재사용의 어려움이 있었기 때문입니다.

따라서 함수형 컴포넌트는 더 간결하고 유지보수가 용이한 코드를 작성할 수 있게 해줍니다.

고차 컴포넌트(HOC)의 개념과 사용

고차 컴포넌트(Higher-Order Component, HOC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 이는 고차 함수(Higher-Order Function)와 유사한 개념입니다.

HOC는 주로 로직 재사용을 위해 사용되었습니다. 예를 들어, 특정 스타일을 적용하거나 공통 로직을 추가하는 데 사용되었습니다. 하지만 HOC를 많이 사용하면 코드가 복잡해지고 가독성이 떨어지는 문제가 있었습니다.

예를 들어, 다음과 같은 HOC를 생각해볼 수 있습니다:

function withStyle(Component) {
    return function StyledComponent(props) {
        return ;
    };
}

왜냐하면 HOC는 컴포넌트를 중첩하여 감싸는 구조로 인해 코드가 복잡해질 수 있기 때문입니다.

따라서 HOC는 훅이 도입되면서 점차 사용이 줄어들고 있습니다.

디스(this) 문제와 함수형 컴포넌트

클래스 컴포넌트에서 디스(this)는 함수 호출 방식에 따라 값이 달라질 수 있습니다. 이는 디스 바인딩 문제를 초래하며, 개발자가 이를 명시적으로 처리해야 했습니다.

예를 들어, 클래스 컴포넌트에서 이벤트 핸들러를 사용할 때 디스를 바인딩해야 하는 경우가 많았습니다:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log(this);
    }

    render() {
        return Click me;
    }
}

왜냐하면 디스는 호출 컨텍스트에 따라 값이 달라지기 때문입니다.

함수형 컴포넌트에서는 이러한 문제가 없습니다. 디스 대신 상태와 함수를 훅을 통해 관리할 수 있기 때문입니다.

훅(Hooks)의 도입과 장점

훅은 함수형 컴포넌트에서 상태와 생명주기 메서드를 사용할 수 있게 해주는 기능입니다. 대표적인 훅으로는 useState와 useEffect가 있습니다.

useState는 상태를 관리하는 데 사용됩니다. 예를 들어, 다음과 같이 상태를 정의할 수 있습니다:

function Counter() {
    const [count, setCount] = useState(0);

    return (
        

            
You clicked {count} times
             setCount(count + 1)}>
                Click me
            
        
    );
}

useEffect는 컴포넌트가 렌더링될 때와 상태가 변경될 때 실행되는 사이드 이펙트를 처리하는 데 사용됩니다.

왜냐하면 훅은 함수형 컴포넌트에서 상태와 생명주기 메서드를 간단하게 사용할 수 있게 해주기 때문입니다.

따라서 훅은 코드의 가독성과 유지보수성을 크게 향상시킵니다.

결론: 함수형 컴포넌트의 중요성

리액트에서 함수형 컴포넌트로의 전환은 로직 재사용성과 디스 문제를 해결하기 위한 중요한 변화였습니다.

고차 컴포넌트(HOC)는 로직 재사용을 위한 강력한 도구였지만, 코드 복잡성을 증가시키는 단점이 있었습니다. 함수형 컴포넌트와 훅의 도입으로 이러한 문제를 해결할 수 있었습니다.

훅은 상태와 생명주기 메서드를 간단하게 관리할 수 있게 해주며, 코드의 가독성과 유지보수성을 향상시킵니다.

왜냐하면 함수형 컴포넌트는 더 간결하고 유지보수가 용이한 코드를 작성할 수 있게 해주기 때문입니다.

따라서 함수형 컴포넌트와 훅은 현대 리액트 개발에서 필수적인 요소로 자리 잡았습니다.