React 컴포넌트

안녕하세요! 오늘은 React에서 가장 중요한 개념 중 하나인 컴포넌트에 대해 알아보겠습니다. React 컴포넌트는 UI를 구축하는 기본 단위로, 재사용 가능하고 독립적인 블록입니다.

React 컴포넌트

1. 컴포넌트란?

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 블록입니다. 컴포넌트는 자신의 상태와 props를 관리하며, 이를 통해 복잡한 UI를 단순하고 유지보수하기 쉽게 구성할 수 있습니다.

2. 컴포넌트의 종류

1. 함수형 컴포넌트 (Functional Components)

함수형 컴포넌트는 함수 형태로 정의된 컴포넌트입니다. 간단한 구조와 훅(Hooks)을 사용하여 상태와 생명 주기를 관리할 수 있습니다.

import React from 'react';

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

2. 클래스형 컴포넌트 (Class Components)

클래스형 컴포넌트는 ES6 클래스를 사용하여 정의된 컴포넌트입니다. 더 복잡한 로직과 생명 주기 메서드를 사용할 수 있습니다.

import React, { Component } from 'react';

class Greeting extends Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

export default Greeting;

3. Props와 State

Props

Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다. 컴포넌트 간에 데이터를 전달하고, 자식 컴포넌트의 동작을 제어하는 데 사용됩니다.

import React from 'react';

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

State

State는 컴포넌트 내부에서 관리되는 동적인 데이터입니다. 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

4. 컴포넌트 생명 주기

클래스형 컴포넌트의 생명 주기 메서드

클래스형 컴포넌트는 생명 주기 메서드를 사용하여 컴포넌트의 특정 시점에 작업을 수행할 수 있습니다.

• componentDidMount: 컴포넌트가 처음 마운트된 후 호출
• componentDidUpdate: 컴포넌트가 업데이트된 후 호출
• componentWillUnmount: 컴포넌트가 언마운트되기 직전에 호출

import React, { Component } from 'react';

class LifecycleDemo extends Component {
    componentDidMount() {
        console.log('Component did mount');
    }

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

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

    render() {
        return <div>Lifecycle Demo</div>;
    }
}

export default LifecycleDemo;

함수형 컴포넌트의 훅 (Hooks)

함수형 컴포넌트에서는 훅을 사용하여 생명 주기와 유사한 기능을 구현할 수 있습니다.

• useEffect: 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행되는 함수

import React, { useEffect } from 'react';

function LifecycleDemo() {
    useEffect(() => {
        console.log('Component did mount or update');
        return () => {
            console.log('Component will unmount');
        };
    }, []);

    return <div>Lifecycle Demo</div>;
}

export default LifecycleDemo;

결론

React 컴포넌트는 UI를 구성하는 기본 단위로, 재사용 가능하고 독립적인 블록입니다. 함수형 컴포넌트와 클래스형 컴포넌트를 사용하여 다양한 방식으로 컴포넌트를 정의할 수 있으며, props와 state를 통해 데이터를 관리하고 전달할 수 있습니다. 또한, 생명 주기 메서드와 훅을 사용하여 컴포넌트의 특정 시점에 작업을 수행할 수 있습니다. 컴포넌트를 잘 이해하고 활용하면, 더 유지보수하기 쉬운 React 애플리케이션을 개발할 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.