React [ 컴포넌트 ]

리액트 컴포넌트란?

리액트(React)는 사용자 인터페이스(UI)를 구성하기 위해 컴포넌트(Component) 라는 개념을 사용합니다. 컴포넌트는 재사용 가능한 코드 조각으로 UI를 독립적이고 작은 단위로 나누어 관리할 수 있게 합니다. 이로 인해 유지보수성과 가독성이 높아지며 코드 재사용이 용이해집니다.

 

컴포넌트의 기본 개념

• 독립성: 컴포넌트는 서로 독립적으로 동작하며 다른 컴포넌트와 결합하여 UI를 구성한다.
• 재사용성: 한 번 작성한 컴포넌트를 다양한 곳에서 재사용할 수 있다.
• 구조화: UI를 계층적으로 구조화하여 개발 및 유지보수를 용이하게 한다.

1. 함수형 컴포넌트(Function Component)
2. 클래스형 컴포넌트(Class Component)

리액트 파일 구조

• /components: 컴포넌트 파일들을 모아 두는 폴더입니다.
• App.js: 애플리케이션의 루트 컴포넌트입니다.
• index.js: 리액트 애플리케이션의 진입점(entry point)으로 App 컴포넌트를 브라우저에 렌더링합니다.

/src
  |-- /components
  |     |-- Header.js
  |     |-- Footer.js
  |     |-- World.js
  |
  |-- App.js
  |-- index.js

 

함수형 컴포넌트 [ 자주씀 ]

더 간결하며 React Hooks를 사용하여 상태(state)와 생명주기(lifecycle)를 관리할 수 있습니다.

단축 : rfc

import React from 'react';

function Header() {
  return (
    <header>
      <h1>Welcome to My Website</h1>
    </header>
  );
}

export default Header;

• function 키워드로 컴포넌트를 정의합니다.
• return문 안에서 JSX(JavaScript XML)를 사용하여 UI를 정의합니다.
• export default를 통해 다른 파일에서 이 컴포넌트를 사용할 수 있습니다

 

클래스형 컴포넌트

상태(state)와 생명주기 메서드(lifecycle methods)를 기본적으로 포함합니다

단축  : rcc

import React, { Component } from 'react';

class Footer extends Component {
  render() {
    return (
      <footer>
        <p>Copyright 2025, All Rights Reserved</p>
      </footer>
    );
  }
}

export default Footer;

 

주요 포인트

• Component 클래스를 상속받아 정의합니다.
• render() 메서드 안에서 JSX를 반환합니다.

 

컴포넌트 만들기

 

폴더 구조

/src
  |-- /components
  |     |-- Header.js
  |     |-- Welcome.js
  |     |-- World.js
  |
  |-- App.js
  |-- index.js

 

App.js

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
    </div>
  );
}

export default App;

 

component/World

export default function world() {
  return <h3>World</h3>
}

component/Welcome

export default function Welcome() {
    return <p>Welcome</p>
}

component/Hello

// const Hello = () => {
//     <p>Hello</p>
// };
import World from './World';

export default function Hello() {
   return (
    <div>
      <h1>hello</h1>
      <World/>
    </div>

   );
}