JSX란?

const element = <h1>Hello, world!</h1>;

위의 태그는 문자열, HTML 둘 다 아니다.

바로 JSX라고 하는 javascript를 확장한 문법이다. 쉽게 말해서 HTML과 javascript가 합쳐졌다고 생각하면된다. 직접 작성한 예를 하나 더 보자.

function Food({ favorite, picture }) {
    return (
        <div>
            <h2>I love {favorite}.</h2>
            <img src={picture} alt={favorite} />
        </div>
    );
}

Food() 컴포넌트(뒤에서 설명할 것이다.)에 JSX를 활용해 HTML을 렌더링하고 있다. JSX에서 javascript를 쓰기 위해서는 {}안에 삽입해야 한다.

Component란?

리액트에서 component는 javascript의 함수라고 생각하면 된다. 이 컴포넌트를 통해 UI를 개별 조각으로 나눠서 활용할 수 있다. 또한 component는 props라는 입력을 받은 뒤 화면에 어떻게 렌더링 할지 보여주는 리액트 element를 반환한다. 아래의 예시를 살펴보자.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}		

Welcome 컴포넌트는 props 객체를 인자로 받아서 props의 attribute인 name을 반환한다.

props를 조금 더 설명하자면 속성을 나타내는 데이터이다. 아래의 예를 살펴보자.

const element = <Welcome name="Sara" />;

이전까지 리액트 엘리먼트를 DOM 태그로 다룬것과는 다르게 사용자 정의 컴포넌트로 나타낸 것이다. 리액트가 위와 같은 사용자 정의 컴포넌트를 발견하면 JSX 어트리뷰트(여기서는 name="Sara"에 해당된다.)와 자식을 해당 컴포넌트(Welcome())에 객체 인자로 전달한다. 이것이 바로 props이다.

내가 직접 작성한 코드를 살펴보자.

const foodILike = [
    {
        id: 1,
        name: "Kimchi",
        image: "example1.com",
    },
    {
        id: 2,
        name: "Samgyeopsal",
        image: "example2.com",
    },
    {
        id: 3,
        name: "Bibimbap",
        image: "example3.com",
    },
    {
        id: 4,
        name: "Doncasu",
        image: "example4.com",
    },
    {
        id: 5,
        name: "Kimbap",
        image: "example5.com",
    },
];

function Food({ favorite, picture }) {
    return (
        <div>
            <h2>I love {favorite}.</h2>
            <img src={picture} alt={favorite} />
        </div>
    );
}

function App() {
    return (
        <div>
            {foodILike.map((element) => (
                <Food
                    key={element.id}
                    favorite={element.name}
                    picture={element.image}
                />
            ))}
        </div>
    );
}

먼저 App() 컴포넌트를 살펴보면 <Food> 사용자 정의 컴포넌트를 확인할 수 있는데 key, favorite, picture 세가지 어트리뷰트를 가지고 있다. 이는 props 객체의 어트리뷰트로써 Food() 컴포넌트의 객체 인자로 전달되고 이를 확인해보면 Food() 인자로 { favorite, picture }를 받고 있다. 이는 (props.favorite, props.picture)와 같다.

props 유효성 검사 패키지

리액트에서는 많은 컴포넌트들이 사용되기 때문에 props를 가져올 때 실수가 있기 마련이다. 이러한 실수를 잡기위해서 prop-types라는 패키지를 설치하자.

npm i prop-types

다음과 같이 import 해주자.

import PropTypes from "prop-types";	

다음과 같이 props 객체 인자의 조건을 설정할 수 있다.

Food.propTypes = {
    favorite: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
};

PropTypes.string.isRequired는 props의 어트리뷰트가 문자열이며 필수조건이어야 함을 말한다. 만약 propTypes.string이 아닌 propTypes.number이고 favorite, picture 어트리뷰트의 value값으로 string을 받았다면 다음과 같은 에러가 발생한다.

이 패키지를 잘 활용하면 디버깅을 쉽게 할 수 있다. 컴포넌트를 선언한 뒤에 props 유효성 검사를 습관적으로 해주자.

소감

JSX와 Component를 살펴봤는데 리액트의 기본이며 매우 중요한 문법이라고 생각한다. 이를 잘 활용하냐에 따라서 리액트의 숙련도가 차이가 날 것이다. 특히 노마드가 말했듯이 component의 경우 공통으로 사용되는 점에서 매우 강력하게 활용될 수 있을 것이다.

javascript와 HTML이 합쳐진 리액트는 정말 매력적인 것 같다. 기존에 HTML을 마크업하고 끝 부분에 script 태그를 추가해서 javascript를 썼는데 이럴 필요가 없다는 점에서 매우 편리하다고 생각한다.