[리액트] 컴포넌트

리액트의 핵심은 컴포넌트 기반의 개발이다. 컴포넌트를 이해하면 리액트의 기본 구조와 작동 원리를 파악하는 데 큰 도움이 된다. 컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성된다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있다.

Component 란

컴포넌트는 리액트 앱의 개별적인 빌딩 블록으로 생각할 수 있다. 컴포넌트는 독립적으로 작동하며 재사용이 가능한 코드 조각이다.

컴포넌트를 사용하면 UI를 재사용 가능한 개별 부분으로 나누고 각 부분을 독립적으로 생각할 수 있다. 예를 들어, 버튼, 헤더, 폼 등은 모두 컴포넌트로 만들 수 있다.

클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
 

함수 컴포넌트

• 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
/** arrow function */
const Hello=(props)=>{
return <h1>Hello, {props.name}</h1>;
}

컴포넌트의 재사용

컴포넌트를 다른 컴포넌트에 집어넣어 재사용하는 것은 리액트의 핵심 원칙 중 하나다.

function Welcome(props) {
  return <h1>안녕, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="사라" />
      <Welcome name="케이트" />
      <Welcome name="제임스" />
    </div>
  );
}

컴포넌트 안의 로직

컴포넌트에서는 훅을 사용해 로직도 넣을수 있다.

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>증가</button>
    </div>
  );
}

export default Counter;

이 예시에서 Counter 함수 컴포넌트는 count 상태를 가지고 있고, increment 함수를 사용해 그 상태를 변경하고 있다.

Props

Props는 'properties'의 줄임말로, 컴포넌트에 값을 전달하는 방법이다. Props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다.

Props는 읽기 전용이다. 컴포넌트 내에서 props를 변경하려고 하면 오류가 발생한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

이 예시에서 name은 prop으로, Welcome 컴포넌트로 "Sara"라는 값을 전달한다.

Props의 children

children은 리액트 컴포넌트가 다른 컴포넌트의 시작 태그와 닫는 태그 사이에 위치한 내용을 자동으로 전달하는 특수한 prop이다.

예를 들어:

<MyComponent>
  <h1>안녕하세요!</h1>
</MyComponent>

이 경우, MyComponent 안에서 props.children을 사용하면 <h1>안녕하세요!</h1>를 받을 수 있다.

function MyComponent(props) {
  return <div>{props.children}</div>;
}

구조 분해 할당을 통한 Props 전달

리액트에서 컴포넌트로 여러 개의 props를 전달할 때, 구조 분해 할당을 사용해 간편하게 props를 받을 수 있다.

예를 들어, 다음과 같이 여러 개의 props를 전달하는 경우:

<MyComponent title="제목" content="내용" id={42} />

컴포넌트 내부에서는 구조 분해 할당을 이용해 다음과 같이 간결하게 받을 수 있다:

function MyComponent({ title, content, id }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
      <span>ID: {id}</span>
    </div>
  );
}

이렇게 하면 각 prop을 props.title, props.content, props.id로 접근하는 대신 직접 변수로 사용할 수 있어 코드가 간결해진다. 이 방식은 코드를 더 깔끔하고 읽기 쉽게 만들어준다. 필요한 부분만 명시적으로 가져올 수 있어서 가독성이 향상된다고 볼 수 있다.

컴포넌트와 props의 조합으로 리액트는 유연한 구조를 가지며, 코드의 재사용과 유지 보수가 용이하다. 개발자는 필요에 따라 컴포넌트를 계층적으로 구성하여 복잡한 UI도 쉽게 관리할 수 있다.