React 첫 컴포넌트 만들기

컴포넌트라는 말이 조금 어렵게 느껴질지 모르겠습니다. 구성요소, 부품, 레고블록 등의 여러 해석 중에 '부품'이라는 말을 쓰면 좋을 것 같습니다. 부품들을 조립해서 물건을 만드는 것처럼, 컴포넌트를 조립해서 프로그램을 완성할 것이기 때문이죠. 리액트에서 사용하는 컴포넌트는 HTML로 대체되는 부품입니다. javascript를 사용해서 부품 기능을 만들고, CSS를 이용해서 부품을 예쁘게 만듭니다.

 

잘 만든 부품들을 조립해서 최종결과물을 만듭니다. 자동차를 만들 때 엔진, 에어컨, 바퀴등을 각각 만들어서 하나로 조립하는 걸 생각하시면 됩니다. 다만 실제 자동차 조립과 다른 점은 실제 자동차는 바퀴를 네 개 만들어야 하지만, 프로그래밍에서는 하나의 바퀴 컴포넌트를 만들어서 무한대의 바퀴를 만들어 쓸 수 있습니다. 재사용이 이렇게 좋은 겁니다.

 

간단한 첫 컴포넌트를 만들어보면 더 이해가 쉬울 겁니다. 화면을 아래와 같이 구성해 봤습니다.

여기는 React 플레이그라운드라는 곳으로 웹에서 리액트를 개발해 볼 수 있습니다. 환경설정하다가 지치는 경우가 많아서 시작할 때는 쉽게 웹에서 바로 해볼 수 있는 게 좋은 것 같습니다. 유료라는게 좀 아쉽네요.

 

https://playcode.io/

좌측이 코드, 오른쪽이 결과물입니다. 결과물을 보면 내용물이 다 다른데, 코드를 보면 중복해서 내용을 출력해 주는 태그들이 보이시죠? 바로 <h1>과 <li>입니다. 태그 사이에 있는 값만 변경할 수 있다면 하나만 만들어서 사용할 수 있을 것 같습니다. 제목 컴포넌트와 메뉴 컴포넌트를 만들어 보도록 하겠습니다.

 

Subject라는 컴포넌트를 만들고 하단에 <Subject />로 넣었습니다. '<Subject />' 코드는 '<h1>한식메뉴</h1>'으로 대체됩니다. 우측 결과는 변동이 없죠.

 

여기서 두 가지 알고 가야 할 게 있습니다.

1. 컴포넌트를 쓸 때 속성을 넣으면 컴포넌트 생성 함수로 전달되어 그 값을 쓸 수가 있습니다.

2. JSX에서 자바스크립트를 쓸 때는 중괄호({})내에 적어주면 됩니다.

 

JSX 조금 더 알아보기

2023.08.14 - [IT] - JSX(JavaScript for XML) 살펴보기

 

예제를 통해서 보면 이해가 더 쉽습니다.

컴포넌트를 사용할 때 다음과 같이 menu 속성을 사용합니다.

 

<Subject  menu="한식메뉴" />
<Subject  menu="중식메뉴" />

그러면 속성값을 컴포넌트 생성 함수에서 사용할 수 있습니다. 속성은 모두 props라는 객체에 담깁니다. 

function Subject(props){
  return <h1>{props.menu}</h1>;
}

위 생성함수는 props를 받았고, props.menu로 속성값을 사용할 수 있습니다. 이 부분을 적용해서 소스를 수정해 보겠습니다.

console.log를 이용해서 props를 출력해 보면 값이 아래와 같이 나옵니다.

첫 번째 <Subject menu="한식메뉴" /> 컴포넌트가 실행될 때, Subject 컴포넌트로 전달된 props를 출력해 보면 menu: "한식메뉴"라는 값이 들어있습니다. 그래서 props.menu는 "한식메뉴"가 돼서, 최종적으로 Subject 컴포넌트가 "<h1>한식메뉴</h1>"라는 값을 리턴하게 됩니다. 

 

그래서 두 번째 '<Subject  menu="중식메뉴" />'는 '<h1>중식메뉴</h1>'를 리턴하게 됩니다. 

대략 이해가 가시나요? 

 

계속해보겠습니다. 

 

제목을 컴포넌트로 바꿨으니, 내용도 컴포넌트로 바꿔보겠습니다. 컴포넌트 하나로 다른 내용을 출력할 수 있다는 걸 보셨습니다. 그럼 <li></li> 부분은 어떻게 바꿔야 할까요? 순서대로 한번 해보겠습니다.

      <ul>

        <li>김치찌개</li>

        <li>된장찌개</li>

        <li>제육덮밥</li>

      </ul>

 

      <ul>

        <li>짜장면</li>

        <li>짬뽕</li>

        <li>볶음밥</li>

      </ul>

먼저 하나의  <li></li>태그를 대체할 <Li /> 컴포넌트를 만들겠습니다.

function Li(){

  return <li></li>

}

두 번째, 컴포넌트로 전달될 값을 props를 이용해 표현하겠습니다. 넘겨질 값의 이름은 'food'라고 하겠습니다. 그러면 컴포넌트는 다음과 같이 바꿀 수 있습니다.

function Li(props){

  return <li>{props.food}</li>

}

<li></li>태그를 <Li> 컴포넌트로 바꾸고 각 컴포넌트마다 넘겨줄 food값을 설정해 주겠습니다.

      <ul>

        <Li food="김치찌개" />

        <li>된장찌개</li>

        <li>제육덮밥</li>

      </ul>

이런 식으로 변경하면 됩니다. 

지금까지 간단한 컴포넌트를 작성해서 사용하는 방법에 대해 알아봤습니다. 기존코드가 얼마 안돼 컴포넌트로 바꾼 부분이 별 차이가 없어 보이네요. 이후 더 복잡한 작업을 하게 되면, 컴포넌트를 만들어서 사용하는 부분이 얼마나 경제적인지 알 수 있을 겁니다.