[공식문서] JavaScript에서 React로 #6

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

 

사용자 인터페이스는 구성 요소(components)라고 불리는 더 작은 구성 블록으로 분할할 수 있습니다.

구성 요소를 사용하면 독립적이고 재사용 가능한 코드 조각을 빌드할 수 있습니다. 구성 요소를 레고 브릭처럼 생각하면, 이러한 개별 브릭을 가져와서 더 큰 구조물을 형성하는 데 결합할 수 있습니다. UI의 일부를 업데이트해야 할 경우 특정 컴포넌트 또는 브릭을 업데이트할 수 있습니다.

이 모듈화는 코드가 성장함에 따라 유지 관리하기 더 쉬워지며, 응용 프로그램의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 업데이트 및 삭제할 수 있습니다.

React 컴포넌트의 좋은 점은 그저 JavaScript이라는 것입니다. JavaScript 관점에서 React 컴포넌트를 어떻게 작성하는지 알아보겠습니다.

Next.js 공식문서 - React 컴포넌트 구성

컴포넌트 생성하기

 

React에서 컴포넌트는 함수입니다. 스크립트 태그 내부에 header라는 함수를 작성하세요.

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


  function header() {
  }

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

 

컴포넌트는 UI 요소를 반환하는 함수입니다. 함수의 return 문 내부에 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);

 

그런 다음 <Header> 컴포넌트를 새로운 <HomePage> 컴포넌트 내에 중첩시킵니다.

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

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

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

 

컴포넌트 트리

 

이렇게 React 컴포넌트를 중첩하여 컴포넌트 트리를 형성할 수 있습니다.

Next.js 공식문서 - 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);

 

다음 섹션에서는 props에 대해 논의하고 컴포넌트 간에 데이터를 전달하는 방법을 알아보겠습니다.