Component

React 의 재사용 가능한 UI 요소

컴포넌트는 재사용 가능한 UI 조각으로, 독립적이며 특정 기능을 수행하는 데 사용됩니다. React 애플리케이션은 컴포넌트의 조합으로 구성되며, 각 컴포넌트는 자체적으로 상태를 가질 수 있습니다. 이러한 모듈화된 구조는 애플리케이션을 보다 효율적으로 관리하고 유지보수하기 쉽게 만듭니다.

컴포넌트 이해하기

위의 그림에서 다음 리액트 아이콘으로 표시한 부분은 전부 컴포넌트입니다.

컴포넌트는 React 애플리케이션에서 다양한 역할을 수행할 수 있습니다. 주로 다음과 같은 역할로 사용됩니다

헤더, 메인, 푸터, 메뉴바, 사이드바, 폼, 버튼 등

헤더 (Header) 컴포넌트: 웹 페이지 상단에 위치하며 사이트 로고, 네비게이션 등을 포함할 수 있습니다.

메인 (Main) 컴포넌트: 웹 페이지의 주요 콘텐츠를 표시하는 부분으로, 다른 컴포넌트를 포함하여 페이지를 구성할 수 있습니다.

푸터 (Footer) 컴포넌트: 웹 페이지 하단에 위치하며 저작권 정보, 연락처 등을 표시할 수 있습니다.

메뉴바 (Navbar) 컴포넌트: 네비게이션 메뉴, 링크 등을 담당하여 사용자가 페이지 간을 이동할 수 있게 합니다.

사이드바 (Sidebar) 컴포넌트: 웹 페이지의 측면에 위치하며 부가 정보나 메뉴 등을 표시할 수 있습니다.

폼 (Form) 컴포넌트: 사용자로부터 정보를 입력받기 위한 폼 요소들을 포함할 수 있습니다.

버튼 (Button) 컴포넌트: 사용자와 상호작용하기 위한 버튼을 표시할 수 있습니다.

또한, React에서는 컴포넌트 안에 다른 컴포넌트를 포함할 수 있습니다. 이를 Component Composition; "컴포넌트 합성" 또는 "컴포넌트 조립"이라고 합니다. 이를 통해 컴포넌트를 재사용하고, 코드를 모듈화하여 유지보수성을 높일 수 있습니다. 예를 들면, 메인 컴포넌트 안에 다양한 세부 컴포넌트를 조합하여 페이지를 구성하는 것이 가능합니다.

컴포넌트 정의

React에서 컴포넌트를 정의하는 방법은 크게 함수형 컴포넌트와 클래스 컴포넌트 두 가지가 있습니다.

함수형 컴포넌트

클래스 컴포넌트

함수형 컴포넌트

function 키워드나 화살표 함수를 사용하여 정의하며, props를 인자로 받아 컴포넌트를 반환합니다.

JSX 문법을 사용하는 경우 확장자를 .jsx로 사용하는 것이 일반적입니다. 그러나 JSX 문법을 사용하지 않고 일반 JavaScript 파일로 구현하려면 .js 확장자를 사용할 수 있습니다.

일반적으로 React에서는 컴포넌트 파일에 JSX를 사용하므로 .jsx 확장자를 사용하는 것이 좋습니다. 이렇게 함으로써 코드 에디터나 다른 도구에서 해당 파일이 React 컴포넌트를 포함하고 있음을 쉽게 파악할 수 있습니다.

선언적 함수로 함수형 컴포넌트 선언

import React from 'react';

// 선언적 함수 - 함수형 컴포넌트 선언
function FunctionalComponent() {
  return (
    <div>
      <h1>Hello, Functional Component!</h1>
      <p>This is a simple functional component.</p>
    </div>
  );
}

export default FunctionalComponent;
JavaScript
복사

익명 함수(화살표 함수)로 함수형 컴포넌트 선언

import React from 'react';

// 익명 함수(화살표 함수) - 함수형 컴포넌트 정의
const FunctionalComponent = (props) => {
  return (
    <div>
      <h1>Hello, Functional Component!</h1>
      <p>This is a simple functional component.</p>
    </div>
  );
};

export default FunctionalComponent;
JavaScript
복사

Hooks를 사용한 함수형 컴포넌트

import React, { useState, useEffect } from 'react';

const ExampleComponent = () => {
  // useState: 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook
  const [count, setCount] = useState(0);

  // useEffect: 함수형 컴포넌트에서 부수 효과(사이드 이펙트)를 수행할 수 있게 해주는 Hook
  useEffect(() => {
    document.title = `Count: ${count}`;
    // 컴포넌트가 마운트되거나 count 값이 변경될 때마다 실행되는 부수 효과
    // 여기서는 문서의 제목을 업데이트하는 예시를 보여줍니다.
    // 이렇게 useEffect를 사용하면 렌더링 직후 또는 값이 변경될 때 특정 작업을 수행할 수 있습니다.

    // useEffect의 두 번째 매개변수로 배열을 전달하면 해당 값이 변경될 때만 실행됩니다.
    // 만약 빈 배열을 전달하면 컴포넌트가 처음 마운트될 때만 실행됩니다.
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;
JavaScript
복사

•

useState, useEffect, 등의 Hook 함수를 사용하여 상태와 라이프사이클 기능을 함수형 컴포넌트에서 사용할 수 있게 됩니다.

•

useState
: 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있게 하는 Hook입니다. useState 함수는 현재 상태와 상태를 갱신할 수 있는 함수를 반환합니다.

•

useEffect
: 함수형 컴포넌트에서 부수 효과(사이드 이펙트)를 수행할 수 있게 하는 Hook입니다. 컴포넌트의 렌더링 직후나 특정 상태나 프롭스가 변경될 때 특정 작업을 수행할 수 있습니다.

함수형 컴포넌트는 간결하고 가독성이 좋으며, Hooks의 도입으로 기능적으로 클래스형 컴포넌트와 유사한 기능을 수행할 수 있게 되었습니다. 최신의 React 애플리케이션에서는 함수형 컴포넌트와 Hooks를 주로 사용하는 추세입니다.

클래스 컴포넌트

클래스 컴포넌트는 React.Component 클래스를 상속하여 구현합니다.

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, Class Component!</h1>
        <p>This is a simple class component.</p>
      </div>
    );
  }
}

export default ClassComponent;
JavaScript
복사

클래스 컴포넌트는 React.Component 를 상속하여 구현하기 때문에, React.Component 가 가지고 있는 컴포넌트 생명주기(라이프사이클) 메서드를 사용할 수 있습니다.

import React, { Component } from 'react';

class LifecycleExample extends Component {
  // 이 메소드는 컴포넌트가 DOM에 추가된 후에 자동으로 호출됩니다.
  componentDidMount() {
    console.log('컴포넌트가 마운트되었습니다.');
  }

  // 이 메소드는 컴포넌트가 DOM에서 제거되기 전에 자동으로 호출됩니다.
  componentWillUnmount() {
    console.log('컴포넌트가 언마운트될 예정입니다.');
  }

  // render 메소드는 모든 React 컴포넌트에서 필수적으로 존재해야 합니다.
  render() {
    return <div>컴포넌트 라이프사이클 예제</div>;
  }
}
JavaScript
복사

위의 클래스는 LifecycleExample이라는 React 컴포넌트를 정의합니다. React 라이브러리에서 제공하는 Component 클래스를 확장하고 있습니다.

componentDidMount 메소드는 컴포넌트가 DOM에 추가된 후 자동으로 호출되며, 주로 데이터를 가져오는 등 컴포넌트가 DOM에 추가된 후에 수행해야 할 작업에 사용됩니다.

componentWillUnmount 메소드는 컴포넌트가 DOM에서 제거되기 전에 자동으로 호출되며, 리소스 정리나 네트워크 요청 등 언마운트되기 전에 처리해야 할 작업에 사용됩니다.

render 메소드는 모든 React 컴포넌트에서 필수적으로 존재해야 합니다. 이 메소드에서는 컴포넌트의 UI 구조를 정의하고 있습니다.

참고: 현대적인 React 개발에서는 함수형 컴포넌트와 Hooks가 점차 더 많이 사용되고 있습니다.

함수형 컴포넌트 vs 클래스 컴포넌트

React 16.8 Hooks 의 도입으로 함수형 컴포넌트에서도 상태관리 및 라이프사이클 메서드를 사용할 수 있게 됨으로써, 최신 React 에서는 함수형 컴포넌트+Hooks 가 트랜드가 되었습니다.

클래스 컴포넌트는 React.Component 를 상속하여 구현하기 때문에, React.Component 가 가지고 있는 컴포넌트 생명주기(라이프사이클) 메서드를 사용할 수 있습니다. 또한 컴포넌트의 state(상태)를 관리 할 수 있습니다.

초기에는 함수형 컴포넌트는 상태관리, 생명주기 메서드를 사용할 수 없었습니다.

하지만, React 16.8 버전부터 Hooks 라는 개념이 도입되면서, 함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능을 사용할 수 있게 되었습니다.

함수형 컴포넌트에서도 상태를 사용하고, 부수 효과를 처리할 수 있게 되어 함수형 컴포넌트의 사용성과 재사용성이 향상되었습니다. Hooks는 클래스형 컴포넌트에서 제공되는 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주는 것이 주요 목적 중 하나입니다.

컴포넌트 구성요소

•

State (상태)

•

Props (속성)

•

Render Method (렌더 메서드)

•

Lifecycle Methods (생명주기 메서드)

•

Event Handling (이벤트 처리)

State (상태)

컴포넌트가 관리하는 로컬(내부) 데이터

React 컴포넌트의 상태(State)는 컴포넌트가 관리하는 로컬 데이터입니다. 상태를 사용하면 컴포넌트가 동적인 데이터를 저장하고 표시할 수 있으며, 상태가 변경될 때마다 React는 자동으로 화면을 다시 렌더링합니다.

State 의 특징

상태 초기화
: 컴포넌트가 생성될 때 useState 훅이나 클래스 컴포넌트의 constructor 메서드에서 초기 상태를 설정합니다.

상태 업데이트
: setCount나 this.setState를 사용하여 상태를 업데이트합니다. 이때 이전 상태를 참조하여 변경을 진행하는 것이 중요합니다.

컴포넌트별로 고유한 상태
: 각각의 인스턴스는 자체 상태를 유지하므로, 동일한 컴포넌트의 여러 인스턴스 간에는 각각 독립적인 상태가 존재합니다.

실습 코드

리액트 프로젝트 생성

Component/ClassComponent.jsx 

Component/FunctionComponent.jsx 

App.js  

서버 실행

리액트 프로젝트 생성

npx create-react-app state-app
Shell
복사

Component/ClassComponent.jsx

import React from 'react'

class ClassComponent extends React.Component {
    constructor(props) {
        super(props);

        // 상태 정의
        this.state = {
            name: "Aloha",
        };

        // this 바인딩
        this.handleClickAloha = this.handleClickAloha.bind(this);
        this.handleClickJoeun = this.handleClickJoeun.bind(this);

    }
    
    handleClickAloha() {
        console.log('Aloha Click!');

        // 상태 설정
        this.setState({ name: 'Aloha' });
    }

    handleClickJoeun() {
        console.log('Joeun Click!');

        // 상태 설정
        this.setState({ name : 'Joeun' });
    }

    render() {
        const { name } = this.state;
        return (
            <div>
                <h1>클래스 컴포넌트</h1>
                <h2>Hello I'm {name}</h2>
                <button onClick={this.handleClickAloha}>Aloha</button>
                <button onClick={this.handleClickJoeun}>Joeun</button>
            </div>
        )
    }

}
export default ClassComponent
JavaScript
복사

클래스 컴포넌트에서는, 생성자에서 this.state = {}; 형태로 상태(state) 를 정의합니다. this.setState(); 매서드를 호출하여 상태(state)를 업데이트합니다.

Component/FunctionComponent.jsx

import React, { useState } from 'react';

const FunctionComponent = () => {
  // useState를 사용하여 name이라는 상태와 이를 갱신할 수 있는 setName 함수를 선언
  const [name, setName] = useState('Aloha');

  // handleClick 함수 정의
  const handleClick = (newName) => {
    console.log(`${newName} Click!`);

    // setName 함수를 사용하여 name 상태를 갱신
    setName(newName);
  };

  return (
    <div>
      <h1>함수형 컴포넌트</h1>
      <h2>Hello I'm {name}</h2>
      {/* 버튼 클릭 시 handleClick 함수 호출 */}
      <button onClick={() => handleClick('Aloha')}>Aloha</button>
      <button onClick={() => handleClick('Joeun')}>Joeun</button>
    </div>
  );
};

export default FunctionComponent;
JavaScript
복사

함수형 컴포넌트에서는, this.setState가 아닌 useState 훅을 이용하여 상태를 관리합니다. useState 훅은 배열을 반환하는데, 첫 번째 요소는 현재 상태값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.

const [name, setName] = useState('Aloha');
JavaScript
복사

useState('Aloha') 함수가 배열을 반환

[0]  ‘Aloha’ (초기값)

[1]  상태값을 업데이트하는 함수

name = ‘Aloha’

setName = (업데이트 함수)

"세터 함수(setter function)”

•

ex) name - setName

일반적으로 React에서는 상태 변수와 해당 상태를 업데이트하는 함수를 정의할 때, 상태 변수의 이름에는 해당 상태의 값이, 그리고 업데이트 함수의 이름에는 'set'을 접두어로 두고 그 뒤에 상태 변수의 이름을 CamelCase로 작성하는 것이 관례입니다.

App.js

import logo from './logo.svg';
import './App.css';
import ClassComponent from './component/ClassComponent';
import FunctionComponent from './component/FunctionComponent';

function App() {
  return (
    <>
      <ClassComponent />
      <hr></hr>
      <FunctionComponent />
    </>
    
  );
}

export default App;
JavaScript
복사

서버 실행

Shell
복사

실행 결과 - Aloha 클릭 시

실행 결과 - Joeun 클릭 시

Props (속성)

부모 컴포넌트에서 자식 컴포넌트로 전달하기 위한 데이터 properties 의 줄임말

외부에서 전달되는 매개변수. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

이것이 React 컴포넌트 간에 정보를 주고받는 주요 메커니즘 중 하나입니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 데이터를 전달하고, 자식 컴포넌트는 이를 활용하여 화면에 정보를 표시하거나 특정 동작을 수행할 수 있습니다.

React에서는 props를 통한 단방향 데이터 전달이 주요한 패턴입니다.

단, 상태 관리 라이브러리인 Redux, Context API 등을 사용하면 컴포넌트 간의 데이터 흐름을 조금 더 유연하게 관리할 수 있습니다.

실습 코드

리액트 프로젝트 생성

App.css 

Component/Card.jsx 

Component/CardList.jsx 

App.js  

서버 실행

리액트 프로젝트 생성

npx create-react-app props-app
Shell
복사

App.css

.card {
  border: 1px solid #ccc; padding: 10px; margin: 10px;
}
CSS
복사

일반적으로 App.css는 애플리케이션 전반에 걸쳐 적용되는 스타일을 관리하는 데 사용됩니다. index.css는 주로 전역 스타일 설정이나 초기화 스타일에 사용됩니다. 각각의 컴포넌트에 해당하는 스타일을 모듈화하고 App.css에 import하여 사용하는 방식도 흔히 사용됩니다.

여러 컴포넌트에 공통으로 적용되는 스타일은 App.css에 모아두고, 각 컴포넌트에서 필요한 경우에는 해당 컴포넌트의 파일 안에서 모듈화된 스타일을 정의하는 것이 일반적인 관례입니다.

Component/Card.jsx

import React from 'react';

const Card = (props) => {
  return (
    <div className='card'>
      <h3>{props.title}</h3>
      <p>{props.content}</p>
    </div>
  );
};

export default Card;
JavaScript
복사

Component/CardList.jsx

import React from 'react';
import Card from './Card';

const CardList = () => {
  // Card 컴포넌트에 전달할 데이터 배열
  const cardData = [
    { no: 1, title: 'Card 1', content: 'Content for Card 1' },
    { no: 2, title: 'Card 2', content: 'Content for Card 2' },
    { no: 3, title: 'Card 3', content: 'Content for Card 3' },
  ];

  return (
    <div>
        <h1>Card List</h1>
        {/* <Card key={0} title={cardData[0].title} content={cardData[0].content} ></Card> */}
        {/* <Card key={1} title={cardData[1].title} content={cardData[1].content} ></Card> */}
        {/* <Card key={2} title={cardData[2].title} content={cardData[2].content} ></Card> */}
        {cardData.map((card, index) => {
            return <Card key={card.no} title={card.title} content={card.content} />
        })}
    </div>
  );
};

export default CardList;
JavaScript
복사

App.js

import './App.css';
import CardList from './Component/CardList';

function App() {
  return (
    <>
      <h1>Props 실습</h1>
      <CardList />
    </>
  );
}

export default App;
JavaScript
복사

서버 실행

Shell
복사

실행 결과

Render Method (렌더 메서드)

컴포넌트가 화면에 어떻게 표시될지를 정의하는 메서드

render 메서드는 React 클래스 컴포넌트에서 가장 중요한 메서드 중 하나입니다. 이 메서드는 컴포넌트의 UI를 정의하고 반환합니다. render 메서드는 클래스 컴포넌트가 화면에 표시될 때마다 자동으로 호출되며, React 엔진은 이를 통해 반환된 UI를 실제 DOM에 렌더링합니다.

기본구조

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // UI를 반환하는 부분
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default MyComponent;
JavaScript
복사

함수형 컴포넌트와 렌더 메서드

함수형 컴포넌트에서는 render() 메서드없이, return 으로 렌더링을 대신합니다.

함수형 컴포넌트에서는 클래스 컴포넌트처럼 명시적인 render 메서드가 없습니다. 대신, 함수형 컴포넌트 자체가 렌더링을 담당하는 역할을 합니다. 함수형 컴포넌트에서 UI를 정의하려면 단순히 함수의 반환값으로 JSX를 사용합니다.

import React from 'react';

const MyComponent = () => {
  // UI를 반환하는 부분
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;
JavaScript
복사

Event Handling (이벤트 처리)

사용자의 상호작용에 대한 응답으로 발생하는 이벤트를 처리하는 기능

실습 코드

리액트 프로젝트 생성

Component/Product.jsx 

App.js  

서버 실행

리액트 프로젝트 생성

npx create-react-app event-app
Shell
복사

Component/Product.jsx

import React, { useState } from 'react'

const Product = () => {

    // 상태 
    const [quantity, setQuantity] = useState(1);
    const price = 1000;         // 상품 단가

    // 수량 증가 함수
    const increaseQuantity = () => {
        setQuantity(quantity + 1);
    };

    // 수량 감소 함수
    const decreaseQuantity = () => {
        if( quantity > 1 ) {
            setQuantity(quantity - 1);
        }
    };

    // 총 가격 계산
    const totalPrice = price * quantity;

    return (
        <div>
            <h2>상품 정보</h2>
            <ul>
                <li>가격 : {price}</li>
                <li>수량 : {quantity}</li>
                <li>총 가격 : {totalPrice}</li>
            </ul>
            <button onClick={increaseQuantity}>+</button>
            <button onClick={decreaseQuantity}>-</button>
        </div>
    )
}

export default Product
JavaScript
복사

App.js

import logo from './logo.svg';
import './App.css';
import ClassComponent from './component/ClassComponent';
import FunctionComponent from './component/FunctionComponent';

function App() {
  return (
    <>
      <Product />
    </>
    
  );
}

export default App;
JavaScript
복사

서버 실행

Shell
복사

React Component 실습

상품 관리 사이트를 구현

React 로 상품 목록 페이지 구현

Card.jsx

CardList.jsx

상품 관리 FrontEnd (React)

상품 관리 REST API 서버 구현

상품 테이블 정의

Spring Boot REST API 구현

API 명세서 자동 생성 - OpenAPI(Swagger)

API 테스트

상품 테이블 정의

상품

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

https://www.erdcloud.com/d/5DQHMRPBdEnm8tZtG

상품 관리 BackEnd (SpringBoot)

클라이언트에서 서버로 비동기 데이터 요청

상품 관리 - 데이터 연동