React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(7)

React 컴포넌트 구조와 재사용: 컴포넌트 설계, props와 state의 개념

이번 강의에서는 React 컴포넌트 구조를 설계하고, 컴포넌트를 어떻게 재사용할 수 있는지 알아보겠습니다. 또한 props와 state의 개념을 이해하고, 이를 활용해 컴포넌트 간 데이터 흐름을 처리하는 방법을 배웁니다.

React 컴포넌트 구조와 재사용

---

1. React 컴포넌트 설계 및 재사용

React의 핵심은 컴포넌트 기반 아키텍처입니다. 컴포넌트는 UI의 독립적인 재사용 가능한 조각으로, 이를 조합하여 복잡한 UI를 구성할 수 있습니다.

1.1 컴포넌트 생성 예시

우리는 먼저 간단한 Button 컴포넌트를 만들어보고, 이를 재사용하는 방법을 학습할 것입니다.

// Button.js
import React from 'react';

function Button({ label, onClick, type }) {
  return (
    <button className={`btn btn-${type}`} onClick={onClick}>
      {label}
    </button>
  );
}

export default Button;

이 컴포넌트는 세 가지 props (label, onClick, type)을 받아서 버튼을 렌더링합니다. 이제 이 버튼을 다른 컴포넌트에서 재사용할 수 있습니다.

1.2 컴포넌트 재사용

이제 위에서 만든 Button 컴포넌트를 다른 컴포넌트에서 재사용해 보겠습니다.

// App.js
import React from 'react';
import Button from './Button';

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <div className="container">
      <h1 className="text-center mt-4">Reusable Button Component</h1>
      <div className="text-center">
        <Button label="Primary Button" onClick={() => handleClick('Primary clicked')} type="primary" />
        <Button label="Secondary Button" onClick={() => handleClick('Secondary clicked')} type="secondary" />
        <Button label="Success Button" onClick={() => handleClick('Success clicked')} type="success" />
      </div>
    </div>
  );
}

export default App;

Button 콤포넌트 재사용

 

Button Click Event

1.3 컴포넌트 설계의 장점

• 재사용성: Button 컴포넌트를 여러 곳에서 재사용할 수 있습니다. UI를 더욱 모듈화하고 유지보수를 쉽게 할 수 있습니다.
• 유연성: props를 통해 컴포넌트의 동작을 제어할 수 있으므로 다양한 방식으로 재사용할 수 있습니다.

---

2. props와 state 개념 및 데이터 흐름 이해

2.1 props란?

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 자식 컴포넌트는 이 데이터를 받아 UI를 렌더링할 수 있습니다. 부모 컴포넌트는 자식 컴포넌트의 동작이나 내용을 변경할 수 있도록 props를 전달합니다.

2.2 state란?

state는 컴포넌트 내에서 관리되는 동적인 데이터입니다. state는 컴포넌트 내부에서 변경될 수 있으며, state가 변경될 때마다 해당 컴포넌트는 다시 렌더링됩니다.

2.3 props와 state 사용 예시

다음은 Counter 컴포넌트를 만들고, props와 state를 함께 사용하는 예시입니다.

// Counter.js
import React, { useState } from 'react';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={increment}>Increment</button>
      <button className="btn btn-danger" onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

위 Counter 컴포넌트는 state를 사용해 카운터 값을 저장하고, 부모 컴포넌트에서 props로 초기 값을 전달받습니다.

2.4 부모 컴포넌트에서 props 전달

부모 컴포넌트에서 Counter 컴포넌트에 초기 카운터 값을 props로 전달합니다.

// App.js
import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div className="container">
      <h1 className="text-center mt-4">Counter with Props and State</h1>
      <Counter initialCount={0} />
    </div>
  );
}

export default App;

props와 state를 함께 사용하는 예시

2.5 데이터 흐름 요약

• props: 부모 컴포넌트 → 자식 컴포넌트 (읽기 전용)
• state: 컴포넌트 내에서 관리되며, 해당 컴포넌트가 다시 렌더링될 때 변경됨.

---

결론

이번 강의에서는 React 컴포넌트 구조와 재사용성에 대해 학습하였습니다. 또한 props와 state를 사용하여 컴포넌트 간의 데이터 흐름을 처리하는 방법을 배웠습니다. 컴포넌트를 유연하게 설계하여 재사용성을 극대화하고, props와 state를 적절히 활용하는 것은 React에서 효율적인 UI 개발의 핵심입니다.