[React] 컴포넌트

컴포넌트

리액트 앱을 구성하는 최소한의 단위

• 클래스 컴포넌트
• 함수 컴포넌트

컴포넌트의 장점

• 재사용성: 독립적, 모듈화된 단위
• 가독성과 유지보수성: UI구조의 명확한 파악 가능, 개별 컴포넌트 수정이 가능
• 효율적 업데이트: 가상 DOM, 필요한 부분만 다시 렌더링

함수형 컴포넌트 예시

import React from 'react';

const HelloWorld = ( ) => {
	return <div>Hello, World!</div>;
};

export default HelloWorld

export default를 통해 HelloWorld 컴포넌트를 다른 컴포넌트에서 사용가능하도록 내보냄

import React from 'react';
import HelloWorld from './HelloWorld';

const App = ( ) => {
	return {
    	<div>
        	<h1>My App</h1>
            <HelloWorld />
        </div>
    );
};

export default App;

App 컴포넌트에서 HelloWorld 컴포넌트를 사용하는 예시
App 컴포넌트에서 HelloWorld 컴포넌트를 개별 렌더링