Component(컴포넌트)와 Props(프롭스)는 무엇일까?

Component(컴포넌트)

component란 UI를 독립적이고 재사용 가능한 조각으로 나누어 구성할 때 사용하는 기본 단위이다.

component는 반복적인 코드나 UI를 재사용 가능하게 하여 개발 효율성을 높이고 유지보수를 용이하게 하고, 이를 통해 코드의 일관성을 유지하고, 버그를 줄이며, 개발 속도를 향상시킬 수 있다.

예시

component 사용 예시로는 구글의 관련 검색어 부분이 있는데, 관련 검색어 부분을 보면 빨간색으로 박스를 쳐놓은 부분이 내용만 바뀌고 동일한 형식으로 반복되는 것을 볼 수 있다.

이와 같이 component를 사용하여 개발하면, 반복되는 요소를 일일이 입력할 필요 없이 이미 만들어둔 component들을 조합하여 웹사이트를 만들 수 있다.

코드

// HelloWorld.js (자식 컴포넌트)

import React from 'react';

function HelloWorld() {
  return (
    <h1>
      Hello, World!
    </h1>
  );
}

export default HelloWorld;

// App.js (부모 컴포넌트)

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

function App() {
  return (
    <div>
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
    </div>
  );
}

export default App;

Props(프롭스)

props는 component 간에 데이터를 전달하기 위해 사용되는 중요한 개념이다.

props는 properties의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용되며, props는 자식 컴포넌트가 읽기만 할 수 있는 불변 객체로, 자식 컴포넌트는 전달받은 props를 직접 수정할 수 없다.

예시

위 사진에서 파란줄이 쳐져있는 부분이 props의 예시인데, props는 컴포넌트에 데이터를 전달하는 역할을 한다. (예: "리액트 기초" ↔ "리액트 네이티브")

코드

// App.js (부모 컴포넌트)

import React from 'react';
import HelloWorld from './HelloName';

function App() {
  const names = ["John", "Jane", "Doe"];
  
  return (
    <div>
      <HelloName name={names} />
    </div>
  );
}

export default App;

// HelloName.js (자식 컴포넌트)

import React from 'react';

function HelloName(props) {
  return (
    <h1>
      Hello, {props.name[1]}! // Hello, Jane!
    </h1>
  );
}

export default HelloName;