Next.js 기초 입문 4회차: React 컴포넌트 이해 및 활용

작성자:
📚
제4주차 학습 목표

컴포넌트 이해 및 활용

React 컴포넌트의 개념을 Next.js에서 어떻게 활용하는지 알아봅니다.

Next.js 기초 입문 4회차: 컴포넌트 이해 및 활용

안녕하세요! Next.js 기초 입문 과정의 네 번째 시간입니다. 이번 회차에서는 React의 핵심 개념이자 Next.js 개발의 근간이 되는 컴포넌트(Component)에 대해 심도 있게 학습하겠습니다. 컴포넌트를 이해하고 효과적으로 활용하는 것은 효율적인 UI 개발의 첫걸음입니다.

📌 이번 회차 학습 목표

  • React 컴포넌트의 기본 개념을 정확히 이해할 수 있습니다.
  • 컴포넌트의 재사용성을 활용하여 UI를 효율적으로 구성할 수 있습니다.
  • Next.js 프로젝트 내에서 컴포넌트를 생성하고 적용할 수 있습니다.
  • 컴포넌트 기반 개발의 장점을 설명할 수 있습니다.

📝 개념 설명

1. React 컴포넌트란 무엇인가?

React 컴포넌트는 UI(사용자 인터페이스)를 구성하는 독립적이고 재사용 가능한 코드 블록입니다. 웹 페이지의 특정 부분을 담당하며, 마치 레고 블록처럼 여러 컴포넌트를 조합하여 복잡한 UI를 구축할 수 있습니다. 각 컴포넌트는 자체적인 로직과 외형을 가지며, 다른 컴포넌트와 독립적으로 동작합니다.

 

예를 들어, 웹사이트의 헤더, 푸터, 내비게이션 바, 버튼, 카드 등이 모두 개별적인 컴포넌트로 구현될 수 있습니다. 이러한 컴포넌트들은 필요에 따라 여러 페이지나 다른 컴포넌트 내에서 재사용될 수 있습니다.

2. 컴포넌트의 주요 특징

  • 재사용성 (Reusability): 한 번 만든 컴포넌트는 여러 곳에서 반복적으로 사용될 수 있어 코드 중복을 줄이고 개발 효율성을 높입니다.
  • 모듈성 (Modularity): UI를 작은 단위로 분리하여 관리하므로, 코드의 가독성이 향상되고 유지보수가 용이해집니다.
  • 독립성 (Independence): 각 컴포넌트는 독립적으로 동작하며, 다른 컴포넌트에 영향을 주지 않고 자체적으로 상태를 관리할 수 있습니다.
  • 선언적 (Declarative): 컴포넌트는 ‘무엇을 그릴지’를 선언적으로 명시하며, React가 효율적으로 UI를 업데이트합니다.

3. 함수형 컴포넌트와 클래스형 컴포넌트

React 컴포넌트는 크게 두 가지 형태로 작성될 수 있습니다.

  • 함수형 컴포넌트 (Functional Component): JavaScript 함수로 작성된 컴포넌트입니다. React Hooks의 등장 이후, 상태 관리 및 생명주기 관리 등 클래스형 컴포넌트의 대부분 기능을 함수형 컴포넌트에서 구현할 수 있게 되면서 현재는 가장 널리 사용되는 방식입니다. 간결하고 읽기 쉬운 코드가 장점입니다.
  • 클래스형 컴포넌트 (Class Component): JavaScript 클래스로 작성된 컴포넌트입니다. 과거에는 상태 관리나 생명주기 메서드 사용을 위해 주로 사용되었으나, 현재는 함수형 컴포넌트와 Hooks로 대체되는 추세입니다.

본 학습지에서는 현대 React 개발의 표준인 함수형 컴포넌트를 중심으로 다룰 것입니다.

📌 핵심 포인트
🔑
재사용성
한 번 만든 UI 요소를 여러 곳에서 반복 사용 가능
🧩
모듈성
UI를 작은 단위로 분리하여 관리, 유지보수 용이
🚀
독립성
각 컴포넌트는 독립적으로 동작하며 자체 상태 관리

💡 예제 & 실습

이제 Next.js 프로젝트에서 간단한 컴포넌트를 만들고 활용하는 실습을 진행해 보겠습니다.

실습 1: 간단한 버튼 컴포넌트 만들기

먼저, 프로젝트 내에 components 폴더를 생성하고 그 안에 Button.js 파일을 만듭니다. 이 파일에 버튼 컴포넌트를 정의합니다.

// components/Button.js

import React from 'react';

const Button = ({ children, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: '#0070f3',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
        fontSize: '16px',
      }}
    >
      {children}
    </button>
  );
};

export default Button;
코드 해설:
  1. import React from 'react';: React 기능을 사용하기 위해 React를 임포트합니다.
  2. const Button = ({ children, onClick }) => { ... };: Button이라는 이름의 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 children과 onClick이라는 props(속성)를 받습니다.
  3. children: 컴포넌트 태그 사이에 들어가는 내용을 의미합니다. 예를 들어, <Button>클릭하세요</Button>에서 ‘클릭하세요’가 children이 됩니다.
  4. onClick: 버튼이 클릭되었을 때 실행될 함수를 의미합니다.
  5. <button> 태그에 인라인 스타일을 적용하여 기본적인 디자인을 부여했습니다.
  6. export default Button;: 다른 파일에서 이 Button 컴포넌트를 가져다 사용할 수 있도록 내보냅니다.

실습 2: 생성한 버튼 컴포넌트 활용하기

이제 pages/index.js 파일에서 위에서 만든 Button 컴포넌트를 가져와 사용해 보겠습니다.

// pages/index.js

import Head from 'next/head';
import Button from '../components/Button'; // Button 컴포넌트 임포트

export default function Home() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <div>
      <Head>
        <title>컴포넌트 이해 및 활용</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main style={{ padding: '20px', textAlign: 'center' }}>
        <h1>Next.js 컴포넌트 실습</h1>
        <p>아래 버튼을 클릭해보세요!</p>
        
        <Button onClick={handleClick}>클릭하세요</Button>
        <Button onClick={() => alert('두 번째 버튼 클릭!')} style={{ marginLeft: '10px' }}>또 다른 버튼</Button>
      </main>
    </div>
  );
}
코드 해설:
  1. import Button from '../components/Button';: components/Button.js 파일에서 Button 컴포넌트를 가져옵니다.
  2. const handleClick = () => { alert('버튼이 클릭되었습니다!'); };: 버튼 클릭 시 실행될 함수를 정의합니다.
  3. <Button onClick={handleClick}>클릭하세요</Button>: Button 컴포넌트를 사용합니다. onClick 속성에는 위에서 정의한 handleClick 함수를 전달하고, children으로는 ‘클릭하세요’ 텍스트를 전달합니다.
  4. 두 번째 <Button> 컴포넌트를 통해 동일한 컴포넌트를 재사용하면서 다른 텍스트와 다른 onClick 이벤트를 부여할 수 있음을 보여줍니다.

이 코드를 실행하면 두 개의 버튼이 화면에 나타나며, 각 버튼을 클릭할 때마다 정의된 알림 메시지가 표시될 것입니다. 이처럼 하나의 컴포넌트를 만들어 여러 곳에서 다양한 형태로 재사용할 수 있습니다.

🔄 컴포넌트 활용 흐름
1. 컴포넌트 정의 (예: Button.js)
→
2. 필요한 페이지/컴포넌트에서 임포트
→
3. JSX 내에서 태그처럼 사용

⚠️ 자주 틀리는 것 / 주의사항

  • 컴포넌트 이름은 항상 대문자로 시작해야 합니다. React는 소문자로 시작하는 태그를 HTML 요소(<div>, <span> 등)로 인식하고, 대문자로 시작하는 태그를 React 컴포넌트로 인식합니다. 예를 들어, <button>은 HTML 버튼이지만, <Button>은 React 컴포넌트입니다.
  • 컴포넌트는 항상 하나의 최상위 요소를 반환해야 합니다. 여러 요소를 반환하고 싶다면, <div>나 <></> (Fragment)로 감싸야 합니다.
  • Props는 읽기 전용(Read-Only)입니다. 컴포넌트 내부에서 전달받은 props의 값을 직접 변경해서는 안 됩니다. props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 단방향 흐름입니다.
  • CSS 스타일링 방식 선택: 예제에서는 인라인 스타일을 사용했지만, 실제 프로젝트에서는 CSS 모듈, Styled-components, Tailwind CSS 등 다양한 스타일링 방식을 고려해야 합니다.

🔗 다음 회차 예고

이번 회차에서는 React 컴포넌트의 기본 개념과 활용법을 익혔습니다. 다음 5회차에서는 컴포넌트의 핵심 기능 중 하나인 Props(속성)에 대해 더 깊이 있게 다룰 예정입니다. Props를 통해 컴포넌트 간에 데이터를 어떻게 주고받고, 이를 통해 더욱 유연하고 동적인 UI를 만드는 방법을 학습할 것입니다. 컴포넌트의 재사용성을 극대화하는 중요한 개념이니 다음 회차도 기대해 주세요!

✅ 이번 회차 핵심 정리
  • React 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 블록입니다.
  • 컴포넌트는 재사용성, 모듈성, 독립성 등의 특징을 가집니다.
  • 주로 함수형 컴포넌트를 사용하여 UI를 개발합니다.
  • 컴포넌트는 import하여 다른 컴포넌트나 페이지에서 태그처럼 사용할 수 있습니다.
  • 컴포넌트 이름은 대문자로 시작해야 하며, 하나의 최상위 요소를 반환해야 합니다.

댓글 남기기