Component란?

컴포넌트(Component) 는 HTML 태그들을 반환하는 함수입니다.
일반적으로 컴포넌트의 이름은 해당 함수를 정의할 때 사용한 이름을 따릅니다.

function App() {
  return (
    <>
      <h1>안녕 리액트!</h1>
    </>
  )
}

위의 예시와 같이 이 코드의 함수 이름은 App이므로 App 컴포넌트라고 부릅니다.

컴포넌트의 활용

컴포넌트는 재사용이 가능하며, 하나의 컴포넌트에서 다른 컴포넌트를 포함할 수도 있습니다.
예를 들어, Header 컴포넌트를 만들어 App 컴포넌트 안에서 사용할 수 있습니다.

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

이제 Header 컴포넌트를 App 컴포넌트 내부에 추가해 보겠습니다.

function App() {
  return (
    <>
      <Header />
      <h1>안녕 리액트!</h1>
    </>
  )
}

위와 같이 작성하면, 다음과 같이 화면에 렌더링됩니다.

이처럼 컴포넌트를 활용하면 코드의 재사용성을 높이고, 보다 구조적인 방식으로 UI를 구성할 수 있습니다.

컴포넌트 규칙

리액트 프로젝트에서는 컴포넌트를 한 곳에 모아 관리하는 것이 일반적입니다.
보통 components라는 폴더를 만들어 각 컴포넌트 파일을 정리합니다.
이렇게 하면 파일 구조가 깔끔해지고, 유지보수하기 쉬워집니다.

Props란?

props는 컴포넌트에 값을 전달하는 방식입니다.
말로만 들으면 이해하기 어려울 수 있으니, 예제를 통해 살펴보겠습니다.

예를 들어 우리가 자주 사용하는 네이버(Naver) 를 React로 구현한다고 가정해보겠습니다.

위 이미지에서 검색하는 부분은 search 컴포넌트로 될 것이고, 아래의 메일, 카페 등은 각각 버튼 컴포넌트로 될 것입니다.

단순한 컴포넌트 구조

아래처럼 Button 컴포넌트를 여러 번 사용하여 버튼을 생성할 수 있습니다.

function App() {
  return (
    <>
      <SearchBar />
      <Button />
      <Button />
      <Button />
    </>
  )
}

하지만, 각 버튼이 '메일', '카페', '블로그' 와 같은 고유한 값을 가져야 한다면 어떻게 할까요?
이때, Props를 사용하여 값을 전달하면 됩니다.

Props를 활용한 값 전달

function App() {
  return (
    <>
      <Button text={'메일'} img={'mail.png'} />
      <Button text={'카페'} img={'cafe.png'} />
      <Button text={'블로그'} img={'blog.png'} />
    </>
  )
}

이렇게 하면 Button 컴포넌트는 각각 다른 text와 img값을 전달받아 동적으로 렌더링할 수 있습니다.