React Component

안녕하세요. 오늘은 리액트의 컴포넌트에 대해 알아볼게요.

 

 

 

컴포넌트(Component)

 

리액트의 핵심 철학은 "UI를 독립적인 조각으로 나눠서 관리한다."에요.

 

그 독립적인 조각이 바로 컴포넌트예요.

 

 

하나의 컴포넌트는 화면(UI)의 한 부분을 담당하고, 여러 컴포넌트를 조합해 하나의 완성된 페이지를 만들어요.

 

 

 

컴포넌트의 필요성

 

일반적인 HTML, JS 코드에서는 다음과 같은 문제가 있어요.

 

특정 UI를 반복해서 사용할 때 같은 코드를 여러 번 작성해야 하고,

 

UI를 수정하면 모든 관련 파일을 수정해야 해요.

 

그리고 화면이 복잡해질수록 코드 관리가 어려워요.

 

리액트 컴포넌트는 이런 문제를 해결해요.

 

 

 

컴포넌트의 구조 (JSX 없이 표현)

 

리액트 컴포넌트는 일반적인 자바스크립트 함수 형태예요.

 

JSX를 쓰지 않더라도, React.createElement()를 통해 UI를 반환할 수 있어요.

function Greeting() {
  return React.createElement('h1', null, '안녕하세요!');
}

위의 코드는 jSX 없이 컴포넌트를 정의한 예시예요.

 

이 함수는 리액트가 “UI를 어떻게 구성할지” 알 수 있는 정보를 반환해요.

 

 

 

컴포넌트의 명명 규칙

 

리액트는 대문자로 시작하는 함수를 컴포넌트로 인식해요.

 

function Header() { ... }  ✅ (컴포넌트로 인식)
function footer() { ... }  ❌ (일반 함수로 인식)

👉 규칙: 파일명과 함수명은 대문자로 시작 (UpperCamelCase)
→ HTML 태그(<div>, <p>)와 구분하기 위해서입니다.

 

 

 

컴포넌트의 종류

 

리액트에는 두 가지 유형의 컴포넌트가 있어요.

 

구분	형태	특징
함수형 컴포넌트 (Function Component)	function으로 정의	현재 표준 방식. 코드가 간결하고 성능이 좋음
클래스형 컴포넌트 (Class Component)	class로 정의	과거 방식. state, lifecycle 관리에 사용됐지만 이제 잘 안 씀

// 예시 (함수형 기준)

function Hello() {
  return React.createElement('p', null, '안녕하세요!');
}

 

 

 

컴포넌트 내보내기와 가져오기

 

리액트는 여러 파일에 컴포넌트를 놔둬두고, 서로 불러와 사용할 수 있어요.

 

 

1. 내보내기 (export)

 

컴포넌트를 다른 파일에서 사용할 수 있도록 공개해요.

export default Hello; // 기본 내보내기

 

 

2. 가져오기 (. import)

 

다른 파일에서 해당 컴포넌트를 불러와요.

import Hello from './Hello';

 

주의사항은 기본 내보내기(default export)는 이름을 바꿔서 가져올 수 있지만,

이름 내보내기(export { Hello })는 동일한 이름으로만 가져와야 해요.

 

 

 

컴포넌트의 조합 (Component Composition)

 

리액트의 강력한 점은, 컴포넌트를 서로 조합할 수 있다는 것이에요.

 

즉, 하나의 컴포넌트 안에서 다른 컴포넌트를 불러와 사용해요.

function Header() {
  return React.createElement('h1', null, '헤더 영역');
}

function App() {
  return React.createElement(
    'div',
    null,
    React.createElement(Header),
    React.createElement('p', null, '본문 내용입니다.')
  );
}

// 출력

헤더 영역
본문 내용입니다.

 

 

 

컴포넌트 사용 시 주의점 요약

 

규칙	설명
1. 함수 이름은 대문자로 시작	리액트가 컴포넌트로 인식
2. 반드시 반환값이 있어야 함	컴포넌트는 UI를 반환해야 렌더링됨
3. 최상위 요소는 하나만 존재해야 함	여러 요소를 반환하려면 부모 요소로 묶기
4. 재사용 가능성 고려	기능 단위로 작게 나누는 것이 좋음

 

 

 

실제 동작 예시 (JSX 없이)

// Img 컴포넌트
function Img() {
  return React.createElement(
    'img',
    { src: 'bird.gif', alt: '웃긴 앵무새', width: 300 },
    null
  );
}

// App 컴포넌트
function App() {
  return React.createElement(
    'div',
    null,
    React.createElement('p', null, '앱의 시작'),
    React.createElement(Img)
  );
}

React.createElement()이 반복되어 코드가 다소 복잡하지만,

나중에 배우게 될 JSX 문법이 바로 이 부분을 단순하게 바꿔줘요.

 

 

 

마지막으로 위의 컴포넌트 요약표예요.

 

핵심 포인트	설명
컴포넌트	UI를 함수 단위로 쪼개서 재사용할 수 있는 구조
형태	일반 JS 함수 형태 (function Component() { ... })
반환값	React.createElement() 형태의 UI 구조
대문자 이름	리액트가 컴포넌트로 인식
조합 가능성	여러 컴포넌트를 결합해 하나의 화면 구성
JSX	(다음에 배움) → 위 코드를 더 간결하게 표현하는 문법

 

 

 

여기까지 리액트 컴포넌트에 대해 알아봤는데요. 결국 리액트의 핵심은 “UI를 컴포넌트로 나누는 것”이에요.

작은 단위부터 차근차근 쌓아 올리다 보면, 어느새 거대한 화면도 구조적으로 관리할 수 있게 될 거예요.