React 함수형 및 클래스 컴포넌트

Source: Dev.to

함수 컴포넌트

React에서 함수 컴포넌트는 props(부모 컴포넌트로부터 전달받은 속성)를 인수로 받아 JSX(UI 요소를 정의하기 위한 문법 확장)를 반환하는 단순한 JavaScript 함수로 정의됩니다.

• 특히 간단한 컴포넌트의 경우 작성과 이해가 더 쉽습니다.
• 초기에는 라이프사이클 메서드나 상태(state)에 접근할 수 없었지만, React 16.8 이후 hooks(useState, useEffect 등)를 사용해 상태와 부수 효과를 관리할 수 있게 되었습니다.

예시

function Greeting(props) {
  return 
## Hello, {props.name}!
;
}

클래스 컴포넌트

클래스 컴포넌트는 React.Component를 상속받는 JavaScript 클래스로 정의됩니다.

• 내장된 라이프사이클 메서드(예: componentDidMount)를 제공합니다.
• this.state와 this.setState를 통해 직접 상태를 관리합니다.
• 복잡한 동작이나 외부 데이터 소스와의 상호작용이 필요한 컴포넌트에 적합합니다.

예시

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

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

  render() {
    return (
      
        
You clicked {this.state.count} times

        Click me
      
    );
  }
}

추가 샘플

함수 컴포넌트

function Welcome(props) {
  return 
## Hello, {props.name}
;
}

클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return 
## Hello, {this.props.name}
;
  }
}

데모

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {
  return 
## Hello, {props.name}
;
}

class WelcomeClass extends React.Component {
  render() {
    return 
## Hello, {this.props.name}
;
  }
}

const element = ;
const elementClass = ;

ReactDOM.render(element, document.getElementById("root"));
ReactDOM.render(elementClass, document.getElementById("root-class"));

올바른 컴포넌트 선택

• 단순 UI: 상태나 라이프사이클이 필요 없는 기본 렌더링에는 함수 컴포넌트를 사용합니다.
• 복잡한 동작이나 상태: 명시적인 라이프사이클 메서드나 복잡한 상태 관리가 필요할 때는 클래스 컴포넌트를 사용합니다.
• 현대 React: React 16.8 이후, 함수 컴포넌트와 hooks는 단순함과 미래 지향성 때문에 많이 선호됩니다.

추가 고려 사항

• 성능: 특히 단순한 경우 함수 컴포넌트가 약간 더 빠른 경향이 있습니다.
• 가독성: hooks를 사용하면 클래스 문법에 비해 더 깔끔하고 간결한 코드를 작성할 수 있습니다.
• 커뮤니티 선호: 현재 React 커뮤니티는 hooks를 활용한 함수 컴포넌트를 선호하며, 대부분의 최신 라이브러리와 튜토리얼도 이 흐름을 따르고 있습니다.

결론

함수 컴포넌트와 클래스 컴포넌트 중 어느 것을 선택할지는 컴포넌트의 구체적인 요구사항과 복잡도에 따라 달라집니다. 상태 관리, 라이프사이클 필요성, 팀의 코딩 컨벤션 등을 평가한 뒤, 프로젝트에 가장 적합한 방식을 실험해 보세요.

코딩 즐겁게! 🔥