[6주차] 위클리 페이퍼 - React에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명하세요.

React에서의 컴포넌트란?

자체적인 로직이나 디자인을 가진, UI의 일부분을 의미한다. 작게는 버튼에서부터 크게는 전체 페이지가 될 수 있다. 컴포넌트의 이름은 대문자로 시작한다. 이는 HTML 태그가 소문자로 시작하기 때문에, 혼선을 방지하기 위함이다. 아래는 컴포넌트의 정의와 사용에 대한 예시 코드이다.

// 컴포넌트의 정의
function MyButton() {
  return (
    <button>I'm a button</button>
  );
}


export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <!-- 컴포넌트의 사용 -->
      <MyButton /> 
    </div>
  );
}

---

함수형 컴포넌트와 클래스 컴포넌트의 차이점

함수형 컴포넌트

함수형 컴포넌트는 자바스크립트의 함수 형태로 정의된다. 함수형 컴포넌트는 Hook의 도입으로 상태 및 생명주기 관리 등의 다양항 기능을 수행한다. 예를 들어, useStage()는 상태 관리 기능을 가지고, useEffect()는 생명주기 & 사이드 이펙트 기능을 제공한다. Hook의 등장으로 코드가 간결성과 재사용성을 가지게 되어, 최신 코드에서는 함수형 컴포넌트를 사용하게 된다. 아래는 함수형 컴포넌트의 정의와 사용 예시에 대한 예시 코드이다.

function MyComponent(props) { // props: 부모 컴포넌트에서 전달받은 데이터
        // 상태 초기화: greeting = 'Hello' 설정
    const [greeting, setGreeting] = useState('Hello');
    // Effect 등록: 마운트/언마운트 시 실행할 함수 등록
    useEffect(() => {
        console.log('Component mounted');
        return () => console.log('Component will unmount');
    }, []);
    return <div>{greeting}, {props.name}</div>;
}


/* 사용 예시 */
// 부모 컴포넌트에서 이렇게 사용
function App() {
  return <MyComponent name="김철수" />;
}



// 화면 출력: "Hello, 김철수"
// 콘솔 출력: "Component mounted"

클래스 컴포넌트

클래스 컴포넌트는 자바스크립트의 클래스 형태로 정의된다. 클래스 컴포넌트는 this.state를 이용해 상태관리를 제공하고, componentDidMount(), componentDidUpdate(), componentWillUnmount() 등의 생명주기 메서드 등을 제공한다. 최근에는 함수형 컴포넌트를 주로 사용하며, 클래스 컴포넌트 등은 레거시 코드 등에서 주로 보이게 되었다.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { greeting: 'Hello' };
    }

    componentDidMount() {
        // 컴포넌트가 마운트된 후에 실행됩니다.
    }

    componentDidUpdate(prevProps, prevState) {
        // 컴포넌트가 업데이트된 후에 실행됩니다.
    }

    componentWillUnmount() {
        // 컴포넌트가 언마운트되기 전에 실행됩니다.
    }

    render() {
        return <div>{this.state.greeting}, {this.props.name}</div>;
    }
}

---

참고자료

• 컴포넌트의 개념: https://react.dev/learn#components
• 클래스 컴포넌트 생명주기: https://react.dev/reference/react/Component
• 내장 React Hooks: https://react.dev/reference/react/hooks
• 코드잇 강의: https://www.codeit.kr/topics/fs-paper3/lessons/8635