React - 리액트 컴포넌트 (React Component)

리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드블록이다.

컴포넌트를 사용하면 코드를 모듈화할 수 있어 유지보수가 쉬워지고

재사용성이 높아지는 특징을 갖고 있다.

---

React 컴포넌트 종류

리액트 컴포넌트는 두 가지 주요 컴포넌트 유형이 있다.

 

1. 함수형 컴포넌트 (Functional Component) 

함수형 컴포넌트는 React 16 이후의 최신 방식이며 function 키워드를 사용한다.

function Greeting() {
  return (
    <>
      <h1>안녕하세요</h1>
    </>
  )
}

export default Greeting;

 

2. 클래스형 컴포넌트 (Class Component)

클래스형 컴포넌트는 16 이전에는 많이 사용했지만 

지금은 함수형 컴포넌트와 hook(useState, useEffect)를 더 많이 사용한다.

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello</h1>;
  }
}

export default Greeting;

---

React 컴포넌트 작성하기

1. 기본적인 함수형 컴포넌트 작성하기

다음과 같이 코드를 작성하여 컴포넌트를 사용해본다.

// Greeting.jsx

function Greeting() {
  return (
    <>
      <h1>안녕하세요</h1>
    </>
  )
}

export default Greeting

위와 같이 코드를 작성하여 App.jsx에서 Greeting 컴포넌트를 사용한다.

// App.jsx

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <Greeting />
  )
}

export default App

위와 같이 코드를 작성하여 Greeting 컴포넌트가 App에 포함되어 화면에 나타난다.

// main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

(앞으로 main.jsx는 생략)

---

2. props를 사용해 데이터 전달하기

props으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다

다음과 같이 파일 생성 후 코드를 작성한다.

// UserCard.jsx

function UserCard({ name, age }) {
  return (
    <>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </>
  )
}

export default UserCard

위와 같이 작성하고 App.jsx에서 UseCard 컴포넌트를 사용한다.

// App.jsx

import UserCard from "./UserCard.jsx";

function App() {
  return (
    <UserCard name="섭이" age={20} />
  )
}

export default App

위와 같이 작성하여 UseCard가 각각 다른 props값을 받아서 동작하며

props를 사용하면 같은 컴포넌트라도 데이터를 바꿔서 재사용이 가능하다.

 

3. map() 을 사용하여 여러 개의 컴포넌트 렌더링

// UserCard.jsx

function UserCard({ name, age }) {
  return (
    <>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </>
  )
}

export default UserCard

// UserList.jsx

import UserCard from "./UserCard"

function UserList() {
  const users = [
    { id: 1, name: '행섭', age: 20 },
    { id: 2, name: '죡팡', age: 21 },
    { id: 3, name: '스기따라', age: 22 },
  ]
  return (
    <>
      <h1>사용자 목록</h1>
      {users.map((user) => (
        <UserCard key={user.id} name={user.name} age={user.age} />
      ))}
    </>
  )
}

export default UserList

// App.jsx

import UserList from "./UserList.jsx";

function App() {
  return (
    <UserList />
  )
}

export default App

위와 같이 user 배열을 map()을 사용해 여러 개의 UserCard를 렌더링 할 수 있으며

배열 데이터를 컴포넌트로 변환하여 동적으로 화면을 구성할 수 있다.

4. 이벤트 핸들링 (onClick) 적용

리액트에서는 이벤트 핸들러를 사용하여 클릭, 입력등의 이벤트를 처리할 수 있다.

// Counter.jsx 

function Counter() {
  let count = 0;

  function btnClick() {
    count += 1;
    console.log('현재 카운트:', count);
  }

  return (
    <>
      <p>카운트 : {count}</p>
      <button onClick={btnClick}> +1 증가 </button>
    </>
  )
}

export default Counter

// App.jsx

import Counter from "./Counter.jsx";

function App() {
  return (
    <Counter />
  )
}

export default App

버튼을 클릭하면 콘솔에 현재 카운트가 출력되며 

단, 화면 상으로는 변하지 않는 상태이기에 나중에 useState를 배워 사용할 예정..

---

정리하면 다음과 같다.

리액트 컴포넌트는 UI를 독립적이고 재사용 가능하게 만들어주며

props를 사용하면 부모에서 자식으로 데이터를 전달할 수 있고

map()을 활용하면 여러 개의 컴포넌트를 동적으로 렌더링이 가능하다.

또한 onClick이벤트나 ClassName의 style로 스타일 지정도 가능하다.