[ React ] React 컴포넌트 소개

---

React 컴포넌트 소개

React 컴포넌트는 모든 React 애플리케이션의 빌딩 블록입니다. 각 컴포넌트는 사용자 인터페이스의 일부를 캡슐화하며, 이를 결합하면 애플리케이션의 전체 UI를 형성합니다. React 컴포넌트의 복잡성을 이해하는 것은 React 개발을 하기 위한 기본 요소 입니다.

---

React 컴포넌트 : 클래스와 함수형

지금까지 React 개발자들은 컴포넌트를 정의하는 두 가지 방법을 주로 사용했습니다. 바로 클래스 컴포넌트와 함수형 컴포넌트입니다. 

둘 다 같은 용도로 사용되지만 구문과 특성이 다릅니다. 요즘에는 함수형을 많이 사용하는 추세입니다.

// Class Component 클래스 컴포넌트
class WelcomeClass extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

// Functional Component 함수형 컴포넌트
function WelcomeFunctional(props) {
    return <h1>Hello, {props.name}</h1>;
}

 

 

---

 

클래스 컴포넌트에서 함수형 컴포넌트로

React 초창기에는 클래스 컴포넌트가 컴포넌트를 생성할 때, 특히 state나 생명주기 메서드와 관련된 경우 가장 많이 사용되었습니다. 하지만 React 16.8에 Hook이 도입되면서 함수형 컴포넌트는 상태와 부작용을 가질 수 있게 되었고, 많은 개발자에게 더 매력적인 옵션이 되었습니다.

 

// Class Component with State
class CounterClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    Click me
                </button>
            </div>
        );
    }
}

// Functional Component with State using Hooks
function CounterFunctional() {
    const [count, setCount] = React.useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

 

---

 

클래스 컴포넌트의 라이프사이클 공개

React의 클래스 컴포넌트는 풍부한 생명주기를 가지고 있습니다. 마운트부터 업데이트, 그리고 마운트 해제에 이르기까지 이러한 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 다양한 수명 주기 메서드를 거칩니다.

 

class LifecycleExample extends React.Component {
    componentDidMount() {
        console.log('Component did mount!');
    }

    componentDidUpdate() {
        console.log('Component did update!');
    }

    componentWillUnmount() {
        console.log('Component will unmount!');
    }

    render() {
        return <h1>Hello React!</h1>;
    }
}

 

 

---

 

함수형 컴포넌트에서 Effects

 

Hook의 출현과 함께 함수형 컴포넌트는 'useEffect' 훅을 통해 강력한 이펙트를 도입했습니다. 이 훅은 클래스 컴포넌트에서 볼 수 있는 많은 생명주기 메서드의 동작을 모방할 수 있습니다.

 

function EffectExample() {
    React.useEffect(() => {
        console.log('Component did mount or update!');

        return () => {
            console.log('Component will unmount!');
        };
    }, []);

    return <h1>Hello React with Hooks!</h1>;
}

 

 

---

마무리

React 라이브러리가 발전함에 따라 클래스 컴포넌트와 함수형 컴포넌트 사이의 경계가 계속 모호해지고 있습니다. 커뮤니티와 핵심 팀이 함수형 컴포넌트와 후크에 기대고 있기 때문에 함수형 컴포넌트가 미래라고 해도 과언이 아닙니다. 그럼에도 불구하고 클래스 컴포넌트와 함수형 컴포넌트, 그 수명 주기, 효과를 모두 이해하는 것은 숙달을 목표로 하는 모든 React 개발자에게 매우 중요합니다.