REACT의 컴포넌트

REACT

해당 포스팅에서는 REACT의 컴포넌트에 대해 다룹니다.

이번 포스팅 목차

• REACT의 컴포넌트
  

리액트의 컴포넌트

리액트에서 컴포넌트 는 사용자 인터페이스(UI)를 구축하는 기본 단위입니다. 컴포넌트는 독립적이고 재사용 가능한 코드 블록 으로, 각각의 컴포넌트는 고유한 상태와 속성을 가질 수 있습니다. 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 로 나눌 수 있습니다. 여기에서는 두 가지 컴포넌트의 종류와 그 사용법, 주요 특징을 자세히 설명하겠습니다.

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

함수형 컴포넌트 는 단순히 자바스크립트 함수로 정의됩니다. 함수형 컴포넌트는 props를 인자로 받아 UI를 반환합니다. 리액트 16.8 이후에는 훅(Hooks) 을 사용하여 상태와 생명주기 기능을 추가할 수 있습니다.

주요 특징

• 간결한 문법: 함수형 컴포넌트는 간단하고 가독성이 좋습니다.

• 훅 사용: useState, useEffect 등의 훅을 사용하여 상태 관리와 사이드 이펙트를 처리할 수 있습니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

export default Counter;

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

클래스형 컴포넌트 는 ES6 클래스 문법을 사용하여 정의됩니다. 클래스형 컴포넌트는 React.Component 를 상속하며, 상태와 생명주기 메서드 를 가질 수 있습니다.

주요 특징

• 상태 관리: this.state를 사용하여 상태를 관리합니다.합니다.

• 생명주기 메서드: componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 사용하여 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있습니다.

사용 예시

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

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

export default Counter;

함수형 컴포넌트 vs 클래스형 컴포넌트

• 문법의 간결함: 함수형 컴포넌트는 클래스형 컴포넌트보다 문법이 더 간결합니다.

• 성능: 함수형 컴포넌트는 리액트의 최적화 기법(예: 리액트의 Fiber 구조)을 더 잘 활용할 수 있습니다.

• 훅의 사용: 함수형 컴포넌트는 useState, useEffect 등의 훅을 사용하여 상태와 생명주기를 관리할 수 있습니다. 이는 클래스형 컴포넌트보다 더 직관적이고 코드가 간결해지는 장점이 있습니다.

컴포넌트 간 데이터 전달

리액트 컴포넌트는 props 를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. props 는 읽기 전용이며, 자식 컴포넌트는 이를 변경할 수 없습니다.

사용 예시

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

function App() {
  return <Greeting name="Alice" />;
}

상태 관리 (State Management)

컴포넌트는 state 를 사용하여 동적인 데이터를 관리 할 수 있습니다. state 는 컴포넌트 내부에서 관리되며, setState 또는 useState 훅을 통해 업데이트됩니다.

사용 예시

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

생명주기 메서드 (Lifecycle Methods)

클래스형 컴포넌트는 컴포넌트의 생명주기 동안 특정 작업을 수행하기 위해 생명주기 메서드 를 사용할 수 있습니다. 함수형 컴포넌트에서는 useEffect 훅을 사용하여 동일한 작업을 수행할 수 있습니다.

주요 생명주기 메서드

• componentDidMount: 컴포넌트가 처음 렌더링된 후 호출됩니다.

• componentDidUpdate: 컴포넌트가 업데이트된 후 호출됩니다.

• componentWillUnmount: 컴포넌트가 언마운트되기 전에 호출됩니다.

사용 예시

import React, { useEffect } from 'react';

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

  return <div>Example</div>;
}

마무리

리액트의 컴포넌트 는 사용자 인터페이스를 구축하는 기본 단위 입니다. 함수형 컴포넌트와 클래스형 컴포넌트 는 각각의 장점과 사용 사례를 가지고 있습니다. 함수형 컴포넌트는 간결한 문법 과 훅을 통한 상태 및 생명주기 관리 의 장점을 제공하며, 클래스형 컴포넌트는 전통적인 상태 관리 와 생명주기 메서드 를 제공합니다. 컴포넌트 간 데이터 전달과 상태 관리 는 리액트 애플리케이션에서 중요한 역할을 하며, 이를 통해 복잡한 사용자 인터페이스를 효율적으로 관리할 수 있습니다.