👀 컴포넌트 구성하기 #1

이번 포스팅은 React를 사용하여 React 방식의 컴포넌트 구성을 하는 방법에 대해 포스팅해보려 한다.

 

웹에서는 HTML의 태그를 활용하여 다양한 구조의 컴포넌트를 작성할 수 있다. React는 해당 태그로 구성된 컴포넌트를 재사용이 가능한 UI 요소 재정의하여 사용할 수 있게 도와준다. 그러나 이렇게 얘기하면 어떤 소리인지 와닿지 않는다. 그래서 아래의 예제를 살펴보도록 하자.

 

 

일반적인 HTML의 컴포넌트 구성방법 

 

아래의 코드는 HTML로 구성한 간단한 예시이다. 우리는 일반적으로 아래와 같은 방식으로 HTML 코드를 사용하여 페이지를 구성한다. 

<div class="book">
	<div class="bookpage">
    	<!-- 첫번째 페이지-->
    </div>
    <div class="bookpage">
    	<!-- 두번째 페이지-->
    </div>
    <div class="bookpage">
    	<!-- 세번째 페이지-->
    </div>
</div>

 

 

React를 사용한 컴포넌트 구성방법 

 React를 사용하면 아래와 같이 재사용이 가능한 컴포넌트를 작성하여 사용하면 코드 훨씬 간결하게 작성할 수 있다.

function BookPage(props){
	return (<div className="bookpage"></div>);
}


export default function Book(props) {
	return (
    	<div className="book">
            <BookPage/> // page 1
            <BookPage/> // page 2
            <BookPage/> // page 3
        </div>
    )
}

 

필자의 위의 예시를 코드를 보면서 Spring에서 사용했던 tiles가 떠올랐다. 

 

 

위의 코드를 참고하여 React에서 컴포넌트를 구성하는 방법에 대해 설명해 보도록 하겠다.

React 컴포넌트의 기본 구조

먼저 export와 default에 대해 설명하도록 하겠다. 두 개의 접두사는 표준의 js구문이다. 해당 부분에 대해 모른다면 링크로 이동하여 읽어보자.

 

다음으로는 컴포넌트의  이름을 명명하는 방법에 대해 설명해 보도록 하겠다. 컴포넌트 이름은 꼭 앞의 글자가 대문자로 작성해야 React가 해당 function을 컴포넌트로 인식한다. 꼭..! 꼭!!! 컴포넌트 이름의 첫 글자는 대문자로 작성하도록 하자.

 

다음은 컴포넌트의 내용을 구성하는 방법이다  위의 그림과 같이 return 내부에 마크업(HTML 코드)을  작성하여 해당 컴포넌트의 내용을 작성한다 이때 기본 마크업 언어과 새로 정의한 컴포넌트도 사용할 수 있다.

 

 

요약

React를 사용하면 재사용이 가능한 컴포넌트를 작성하여 사용할 수 있으며 컴포넌트 정의할 땐 컴포넌트의 이름은 첫 글자는 무조건 대문자로 시작해야 한다.