리액트에서 컴포넌트는 UI를 구성하는 독립적인 부분이며, 재사용 가능한 블록으로 생각할 수 있습니다. 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있고, props라 불리는 속성을 통해 데이터를 전달받을 수 있습니다.

1. 컴포넌트(Component)

리액트에서 컴포넌트는 UI를 구성하는 독립적인 부분이며, 재사용 가능한 블록으로 생각할 수 있습니다. 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있고, props라 불리는 속성을 통해 데이터를 전달받을 수 있습니다.

• 재사용성: 컴포넌트는 독립적인 단위로, UI의 특정 부분을 나타냅니다. 이러한 컴포넌트는 필요한 곳 어디에서든 재사용할 수 있습니다.
• 구성 요소: 더 큰 애플리케이션을 구축하기 위해 여러 개의 컴포넌트를 조합하여 사용합니다. 이러한 조합은 작은 부분을 조립하여 큰 화면을 만들어냅니다.
• 상태와 속성: 컴포넌트는 자체적인 상태를 가질 수 있습니다. 또한, 부모 컴포넌트로부터 props라 불리는 속성을 전달받아 이를 활용할 수 있습니다.
• 라이프사이클: 컴포넌트는 마운트(생성), 업데이트, 언마운트(제거) 등의 라이프사이클 단계를 가지며, 이를 활용하여 특정 시점에 원하는 작업을 수행할 수 있습니다.
• 가상 DOM: 리액트의 핵심 기능 중 하나는 가상 DOM(Virtual DOM)입니다. 이를 통해 리액트는 실제 DOM에 대한 변경 사항을 최소화하고 성능을 향상시킵니다.

이러한 React 컴포넌트의 특징으로 재사용 가능하고 모듈화된 코드를 작성하여 유지보수성과 확장성을 높이는 데 큰 역할을 합니다. 페이지, 헤더, 버튼, 모달 등의 UI 요소들은 각각 하나의 컴포넌트로 나누어져 구축된다.

모듈 내보내기(export)

export default TestComponent;

모듈 불러오기(import)

import TestComponent from "./component/TestComponent";

App.js

아래는 TestComponent를 독립적으로 만들어서 App.js에서 import 해서 사용하는 것이다.

import TestComponent from "./component/TestComponent";

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

export default App;

TestComponent.js 컴포넌트

const TestComponent = () => {
  return <div>This is 테스트 컴포넌트!!</div>;
};

export default TestComponent;

2. Props

부모 컴포넌트에서 자식 컴포넌트로 컴포넌트 간에 데이터를 전달할 때 사용됩니다. 부모 컴포넌트에서 props를 설정하고, 자식 컴포넌트에서는 props를 통해 해당 데이터에 접근할 수 있습니다.

아래는 부모 컴포넌트에서 props 객체에 data라는 속성을 TestComponent 에 전달해서 데이터를 출력하는 코드이다.

App.js

import TestComponent from "./component/TestComponent";

function App() {
  return <TestComponent data="SUCCESS" />;
}

export default App;

TestComponent.js 컴포넌트

const TestComponent = (props) => {
  return (
    <>
      <div>This is 테스트 컴포넌트!!</div>
      <div>전달받은 속성 {props.data}</div>
    </>
  );
};

export default TestComponent;

자세한 Props 사용 방법은 직접 개발하면서 여러 스타일을 그때 알아보는 좋다.

[출처]

• 리액트를 다루는 기술-김민준 저자(글)