[Next.js Learn] From JavaScript to React(6) - Building UI with Components

지치지 않는 백엔드 개발자 김성주·2023년 6월 1일

목록 보기

8/50

컴포넌트를 사용하여 UI 구축하기

사용자 인터페이스는 컴포넌트라고 불리는 작은 구성 요소들로 분해될 수 있습니다.

컴포넌트를 사용하면 독립적이고 재사용 가능한 코드 조각을 구축할 수 있습니다. 컴포넌트를 LEGO 조립 블록처럼 생각해보면, 이러한 개별 블록을 함께 결합하여 더 큰 구조물을 형성할 수 있습니다. 만약 UI의 일부를 업데이트해야 한다면, 특정 컴포넌트나 블록을 업데이트할 수 있습니다.

이 모듈성은 코드가 점점 커져도 유지보수하기 쉽게 만들어줍니다. 컴포넌트를 추가, 업데이트, 삭제하는 것만으로도 나머지 애플리케이션을 건드리지 않고 작업할 수 있습니다.

React 컴포넌트의 좋은 점은 그저 JavaScript일 뿐이라는 것입니다. JavaScript 관점에서 React 컴포넌트를 작성하는 방법을 알아보겠습니다.

컴포넌트 생성하기

React에서 컴포넌트는 함수입니다. script 태그 안에 header라는 이름의 함수를 작성해보세요.

<script type="text/jsx">
  const app = document.getElementById("app")


  function header() {
  }

  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

컴포넌트는 UI 요소를 반환하는 함수입니다. 함수의 반환문 안에서 JSX를 작성할 수 있습니다.

<script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  ReactDOM.render(, app)
</script>

이 컴포넌트를 DOM에 렌더링하려면, ReactDOM.render() 메소드의 첫 번째 인자로 전달하면 됩니다.

<script type="text/jsx">

  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }


   ReactDOM.render(header, app)
</script>

하지만 잠깐만요. 위의 코드를 브라우저에서 실행하려고 하면 오류가 발생합니다. 이를 작동시키려면 두 가지 작업을 해야 합니다:

첫째, React 컴포넌트는 일반 HTML과 JavaScript와 구분하기 위해 대문자로 시작해야 합니다.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

// Capitalize the React Component
ReactDOM.render(Header, app);

둘째, React 컴포넌트를 사용하는 방법은 일반 HTML 태그를 사용하는 방식과 동일하며, 꺽쇠 괄호 <>를 사용합니다.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

ReactDOM.render(<Header />, app);

컴포넌트 중첩

일반적으로 애플리케이션은 하나의 컴포넌트보다 더 많은 콘텐츠를 포함합니다. React 컴포넌트를 일반 HTML 요소처럼 서로 중첩할 수 있습니다.

예를 들어, 새로운 컴포넌트인 HomePage를 만들어보세요.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

그런 다음 새로운 <HomePage> 컴포넌트 안에 <Header> 컴포넌트를 중첩해보세요.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}

ReactDOM.render(<Header />, app);

컴포넌트 트리

이와 같은 방식으로 React 컴포넌트를 중첩하여 컴포넌트 트리를 형성할 수 있습니다.

예를 들어, 최상위 수준의 HomePage 컴포넌트는 Header, Article, Footer 컴포넌트를 가질 수 있습니다. 그리고 각 컴포넌트는 자체적으로 자식 컴포넌트를 가질 수 있으며 이어서 계속하여 중첩할 수 있습니다. 예를 들어, Header 컴포넌트는 Logo, Title, Navigation 컴포넌트를 포함할 수 있습니다.

이 모듈식 형식을 사용하면 앱 내에서 컴포넌트를 다른 위치에서 재사용할 수 있습니다.

프로젝트에서 <HomePage>가 최상위 컴포넌트가 되었으므로 ReactDOM.render() 메소드에 전달할 수 있습니다.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);