Next.js 기초편: UI Component 구축하기

사용자 인터페이스는 구성 요소라고 하는 더 작은 빌딩 블록으로 나눌 수 있습니다.

컴포넌트를 사용하면 재사용가능한 코드 조각을 만들 수 있다. 컴포넌트를 레고 블럭으로 생각한다면 이러한 개별 브릭을 결합해 더 큰 구조물을 만들 수 있습니다. UI의 일부를 업데이트해야하는 경우 특정 컴포넌트 또는 브릭을 업데이트 할 수 있습니다.

이 모듈성은 애플리케이션의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 삭제, 업데이트할 수 있기 때문에 코드가 성장함에 따라 유지 관리가 더 쉬워집니다.

리액트 컴포넌트에 대한 좋은 점은 자바스크립트라는 점입니다.
자바스크립트 관점에서 리액트 컴포넌트를 작성하는 방법을 살펴보겠습니다.:

컴포넌트 만들기

리액트에서 컴포넌트는 함수입니다. 스크립트 태그 안에 header라는 함수를 작성해볼게요.:

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

    const header = () => {
        return (<h1>Develop. Preview. Ship. 🚀</h1>) // 1.
    }

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

1. 컴포넌트는 UI를 반환하는 함수입니다. 함수의 return 문 내에서 JSX를 작성할 수 있습니다.
2. 이 컴포넌트를 DOM에 렌더링하려면 ReactDOM.render() 메서드의 첫 번째 인수로 전달하면 된다.

작동이 될까?

❌

브라우저에서 위의 코드를 실행하면 오류가 발생합니다. 그 이유는 2가지 입니다.

1. 리액트 컴포넌트는 일반 HTML 및 JavaScript와 구별하기 위해 대문자로 표시해야 합니다.
2. 꺽쇠 괄호를 사용하여 일반 HTML 태그를 사용하는 것과 같은 방식으로 React 컴포넌트를 사용합니다.

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

    const Header = () => {
        return (<h1>Develop. Preview. Ship. 🚀</h1>) // 1.
    }

    ReactDOM.render(<Header />, app) // 2.
</script>

컴포넌트 중첩하기

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

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

}

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

Component Trees

이런 식으로 리액트 컴포넌트를 계속 중첩해 컴포넌트 트리를 형성할 수 있습니다.

예를 들어, 최상위 HomePage 컴포넌트에는 Header, Article, Footer 컴포넌트가 포함될 수 있습니다.
그리고 이러한 각 컴포넌트는 차례로 자체 하위 컴포넌트를 가질 수 있습니다. 예를 들어 헤더 컴포넌트에는 로고, 타이틀, 네비게이션 컴포넌트가 포함 될 수 있습니다.

이 모듈식 형식을 사용하면 앱 내부의 다른 위치에서 구성 요소를 재사용할 수 있습니다.

이 프로젝트에서 <HomePage>는 이제 최상위 컴포넌트이므로 ReactDOM.render() 메서드에 전달할 수 있습니다.

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

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

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

다음 섹션에서는 props 그리고 그것들을 사용하여 컴포넌트 간에 데이터를 전달하는 방법에 대해 설명합니다.