React 컴포넌트란 무엇인가.

안녕하세요 :)

 

React는 현대 웹 개발에서 가장 많이 사용되는 프레임워크 중 하나입니다. 그 중심에는 컴포넌트(Component)라는 개념이 있는데요. 컴포넌트는 React 애플리케이션을 구성하는 기본이 되는 단위로, 비유하자면 레고 블록에 비유할 수 있습니다. 

https://jaygould.co.uk/2017-03-30-react-styling-options-basic/

사실 제가 컴포넌트 내에서 사용하는 React Hooks에 관한 내용을 다루긴 했는데, 정작 컴포넌트에 대해서는 다루질 않았더라고요? 이 글에서는 React 컴포넌트의 개념과 역할, 종류, 그리고 컴포트를 어떻게 구성하고 사용하는지에 대해 알아보도록 하겠습니다. React에 처음 입문하는 분들이나 컴포넌트를 체계적으로 이해하고 싶으신 분들에게 도움이 됐으면 합니다.

 

React 컴포넌트?

React 컴포넌트는 웹 페이지를 구성하는 어떠한 블록이라고 할 수 있습니다. 레고 조각을 생각해볼까요? 

레고를 여러 개 조립해서 큰 구조물을 만드는 것처럼, 컴포넌트를 조립해서 웹 애플리케이션이 만들어집니다. 레고 블럭이 모여서 집이나 성, 자동차 등이 되는 것처럼, 컴포넌트는 웹 페이지의 버튼, 폼, 헤더, 메뉴 등이 되는 것이죠.

https://www.educba.com/react-components/

정리하자면,

• 레고 블록 하나하나가 개별 컴포넌트라고 생각해봅시다.
• 이 블록들을 조합해서 자동차, 집, 성 같은 큰 구조물을 만들어 내죠.
• React에서는 컴포넌트를 조합하여 웹 애플리케이션 전체를 구성하게 되는 것입니다.

 

React 컴포넌트의 종류

React 컴포넌트는 크게 두 가지로 나뉩니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트입니다. 

https://www.xenonstack.com/blog/functional-vs-class-components

먼저 Functional Component에 대해 살펴보겠습니다.

 

1. 함수형 컴포넌트

함수형 컴포넌트는 React에서 가장 많이 사용하는 방식입니다. 단순한 함수 형태로 작성되며, React Hook을 통해 상태 관리와 사이드 이펙트를 처리할 수 있습니다.

 

작성이 간단하고 최신 React 기능과 호환성이 뛰어나다는 게 장점입니다.

function Example() {
    return <h1> Hello, Jinuk </h1>
}

 

2. 클래스형 컴포넌트

클래스형 컴포넌트는 예전 React에서 주로 사용되었습니다. 클래스형 컴포넌트는 상태와 생명주기를 처리하기 위해 class 키워드를 사용하는데, 작성이 복잡하고 최신 React 기능과 호환이 제한되는 게 단점입니다.

class Example extends React.Component {
    render() {
        return <h1>Hello, Jinuk</h1>
    }
}

 

React 컴포넌트의 역할?

React 컴포넌트의 역할은 크게 세 가지로 볼 수 있습니다.

 

첫 째, UI를 보여줍니다.

• 컴포넌트는 사용자가 화면에서 보는 모든 UI 요소를 담당합니다.
• 예를 들어, 버튼, 입력 필드, 네비게이션 바, 카드 레이아웃 등이 있습니다.

둘 째, 사용자와 상호작용합니다.

• 컴포넌트는 사용자 이벤트를 처리합니다.
• 사용자 이벤트에는 버튼 클릭, 입력 필드에 텍스트 입력 등이 모두 사용자 이벤트에 해당됩니다.
• 예를 들어, 로그인 버튼을 클릭하면 서버에 요청을 보내는 로직이 컴포넌트 안에 작성됩니다.

셋 째, 데이터를 관리합니다.

• 컴포넌트는 부모로부터 전달받은 데이터를 표시하거나, 자체적으로 데이터를 저장하여 화면에 표시합니다.
• React의 Props와 state를 통해 이를 구현할 수 있습니다.

 

React 컴포넌트의 구조

React 컴포넌트는 3단계로 구성되는데요, 차례대로 Import, 컴포넌트 정의, Export로 나눠집니다.

 

하나씩 살펴볼까요?

1. Import
   • 컴포넌트에서 필요한 라이브러리나 모듈을 가져옵니다.
   • 여기에는 React 라이브러리, 스타일 파일, 다른 컴포넌트 등이 있습니다.
2. 컴포넌트 정의
   • 컴포넌트의 주요 내용을 작성합니다. 본문이라고 생각하셔도 좋을 거 같습니다.
   • HTML과 비슷한 JSX 문법으로 UI를 정의하고, 데이터나 이벤트를 처리하는 로직을 추가할 수 있습니다.
3. Exprot
   • 작성한 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.

코드로 한 번 볼까요?

import React from 'react';

function Example() {
    // 여기에 데이터 관리 및 다양한 로직 추가 가능
    
    // return 내부에는 JSX 문법으로 UI 관련 코드가 작성됨
    reutrn <div> Hello, Jinuk </div>
}

export default Example;

 

React 컴포넌트의 관계

React 컴포넌트는 부모와 자식 관계로 연결됩니다. 

• 부모 컴포넌트는 다른 컴포넌트를 포함하고 있습니다. 엄마가 아이를 품는다고 생각하면 편할 거 같습니다.
• 자식 컴포넌트는 부모 컴포넌트에 포함되어 실제 UI를 구성합니다. - 비유 -

 

로그인 페이지 컴포넌트 관계를 예시로 볼까요?

• 부모 컴포넌트 : 로그인 페이지
• 자식 컴포넌트 : 헤더, 로그인 폼, 버튼 등

다이어그램을 보면서 보충 설명을 보도록 하죠.

"로그인 페이지"

로그인 페이지는 전체 화면을 담당하는 부모 컴포넌트입니다. 구성 요소로 헤더 컴포넌트와 로그인 폼 컴포넌트를 가지고 있죠.

주로 사용자에게 로그인 화면을 보여주고, 하위 컴포넌트를 포함해서 화면 구성을 완성합니다.

 

"헤더 컴포넌트"

로그인 페이지의 상단에 위치한 컴포넌트로, 보통 로고나 페이지 제목을 표시합니다. 로고 이미지와 페이지 제목 등을 하위 컴포넌트로 가지고 있을 수 있습니다. 주로 사용자에게 현재 페이지의 목적을 전달하고, 브랜드 로고나 페이지 이름 등 시각적인 요소를 보여줍니다.

 

코드는 이런식으로 들어갈 수 있습니다.

로고 이미지: <img src="logo.png" alt="브랜드 로고" />
제목: <h1>로그인</h1>

 

"로그인 폼 컴포넌트"

로그인 기능을 담당하는 주요 컴포넌트로, 입력 필드와 버튼을 포함합니다. 입력 필드 컴포넌트와 버튼 컴포넌트를 자식 컴포넌트로 가져가죠. 주로 사용자의 아이디와 비밀번호를 입력받고, "로그인" 버튼 클릭 시 서버로 데이터를 전달하는 역할을 합니다.

 

사용자가 아이디와 비밀번호를 입력하고 버튼을 클릭하면, 폼 데이터를 서버로 전송하여 인증을 요청하는 상호작용도 담당합니다.

 

"입력 필드 컴포넌트"

로그인 폼의 세부 요소로, 아이디와 비밀번호를 입력받는 텍스트 필드입니다. 아이디 입력 필드와 비밀번호 입력 필드를 자식 컴포넌트로 가지고 있습니다. 주로 사용자의 입력 데이터를 받아 폼 상태로 저장하거나, 입력값의 유효성 검사를 진행하는 역할을 맡습니다.

 

코드는 이런식으로 들어갈 수 있습니다.

아이디 필드: <input type="text" placeholder="아이디 입력" />
비밀번호 필드: <input type="password" placeholder="비밀번호 입력" />

 

"버튼 컴포넌트"

로그인 폼의 하단에 위치한 버튼으로, 사용자가 입력을 제출하도록 유도합니다. 아마 가장 하위컴포넌트일 것으로 예상되고, 클릭시 폼 데이터를 서버로 전송하거나 요청 상태에 따라 성공 또는 오류 메시지를 표시하는 역할을 맡습니다.

 

코드는 이런식으로 들어갈 수 있습니다.

<button type="submit">로그인</button>

 

뭐, 이런 식으로 부모-자식 간의 관계로 각 컴포넌트가 구성되어 있으며, 각각의 컴포넌트는 특정 역할을 담당하여 페이지 전체를 완성합니다. 컴포넌트를 이렇게 나누는 이뉴는 유지보수와 재사용성을 높이기 위함인데요. 예를 들어, 입력 필드 컴포넌트를 다른 페이지에서도 쉽게 재사용할 수 있습니다.

https://www.figma.com/community/file/1159691052637201894/button-components, https://www.youtube.com/watch?v=F3W_lZzzA3c

 

React 컴포넌트 코드로 보기

LoginPage 컴포넌트

import Header from './Header';
import SignInForm from './SignInForm';

export default function LoginPage() {
  return (
    <div>
      <Header />
      <SignInForm />
    </div>
  );
}

 

SignInForm 컴포넌트

import InputField from './InputField';
import Button from './Button';

export default function SignInForm() {
  return (
    <form>
      <InputField type="text" placeholder="아이디 입력" />
      <InputField type="password" placeholder="비밀번호 입력" />
      <Button text="로그인" />
    </form>
  );
}

 

예시 코드는 위와 같습니다. 참고용으로 봐주세요.

 

끝내는 말

React 컴포넌트는 단순히 UI 구성을 넘어, 사용자와 상호작용하고 데이터를 관리하며 애플리케이션의 전체적인 구조를 잡아주는 역할을 합니다. 오늘은 이렇게 컴포넌트에 대해 알아보았는데, 도움이 되셨을까요?

 

React를 처음 배우시는 분들에게는 "컴포넌트는 레고 블록이다"라는 비유가 남았으면 좋겠습니다. 작은 블록들이 모여 하나의 완성된 구조물을 만드는 것처럼, 컴포넌트도 조합을 통해 큰 애플리케이션을 만들어갑니다. 잘 나누고 역할을 명확히 하다보면 유지보수는 물론이고 재사용성까지 향상되니 잘 사용하시면 좋을 거 같습니다!

 

읽어주셔서 감사합니다 :)