React 컴포넌트 설명: 초보자 친화적인 예제 가이드

Source: Dev.to

소개

React 컴포넌트(함수형 컴포넌트)는 HTML과 비슷한 코드를 반환하는 JavaScript 함수(JSX — JavaScript XML)일 뿐입니다. 이것은 React의 핵심 개념이며 많은 개발자들의 문제를 해결해 줍니다.

React에서 컴포넌트가 중요한 이유

React 컴포넌트는 서로 다른 데이터가 들어간 동일한 코드를 반복해서 작성하는 일을 없애줍니다. 예를 들어, 디자인은 동일하지만 데이터가 다른 네 개의 제품 카드를 렌더링할 때, 하나의 컴포넌트를 여러 번 사용하면 됩니다. 이는 UI 일관성을 높이고, 코드를 이해하기 쉽게 하며, 유지보수를 단순화합니다. 따라서 컴포넌트는 모든 React 애플리케이션에서 필수적입니다.

React 컴포넌트 종류

함수형 컴포넌트

함수형 컴포넌트는 현대적인, 권장되는 컴포넌트 작성 방식입니다. 간단하고 현재 가장 많이 사용됩니다.

function Welcome() {
  return 
## Hello, React!
;
}

클래스 컴포넌트

클래스 컴포넌트는 오래된 접근 방식이며 현대 앱에서는 덜 일반적입니다.

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

참고: 함수형과 클래스 컴포넌트의 상세 비교는 요청 시 제공될 수 있습니다.

첫 번째 컴포넌트 만들기

1단계 – 파일 생성

src/ 폴더에 .jsx 확장자를 가진 파일을 만듭니다(예: Button.jsx).

2단계 – 컴포넌트 작성

function Button() {
  let name = "John Doe";
  return Hello World by {name};
}

3단계 – 컴포넌트 내보내기

export default Button;

전체 Button.jsx 파일:

function Button() {
  let name = "John Doe";
  return Hello World by {name};
}

export default Button;

4단계 – 컴포넌트 가져와서 사용하기

import Button from "./Button";

다음 중 하나의 문법으로 컴포넌트를 렌더링할 수 있습니다:

또는

App.jsx에서의 사용 예시

import Button from "./Button";

function App() {
  return (
    
      
## Hello World

      
    
  );
}

export default App;

앱을 실행하면 버튼이 렌더링된 모습을 확인할 수 있습니다:

컴포넌트 명명 규칙

• 컴포넌트 이름은 대문자로 시작합니다.
• 파일당 하나의 컴포넌트를 사용합니다.
• 명확하고 설명적인 이름을 선택합니다.

피해야 할 흔한 실수

• 소문자로 된 컴포넌트 이름 사용.
• export 문을 빼먹는 경우.
• 래퍼 요소 없이 여러 요소를 반환하는 경우.

중요한 링크

• Quick Start – React
• Your First Component – React
• Getting Started | Vite
• Understanding React Project Structure Created by Vite
• How to Create a React App Using Vite (Step‑by‑Step Guide for Beginners)