React.js에서 JSX사용하기

JSX란?

React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다.

JSX란? - React 공식웹사이트

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

공식 사이트에서는 위와 같이 작성되어 있지만.. 당췌 뭔 소린지...

쉽게 말하면 React.js에서 Virtual DOM을 만들 때 편하게 코딩하라고 HTML처럼 할 수 있게 해주는 템플릿 언어 비스무리한것이다라고 이해하면 될 것 같습니다. (이것도 어려운가? ㅠ)
이렇게 작성된 JSX를 babel로 컴파일을 하면 웹브라우저가 알아먹을 수 있는 javascript로 자동 변환이 됩니다.

예를 들면 아래와 같습니다.

const name = "홍길동";
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(element, document.getElementById("root"));

이렇게 될 때... const element = <h1>Hello, {name}</h1>;이 부분이 JSX 문법으로 작성된 것입니다. 이해가 되시나요? "이게 뭐~~ 많이 본것 같은데.."라고 생각할 수 있겠지만, 일반 javascript에서는 DOM을 이런 식으로 만들지 않습니다. document.createElement('h1'); 이렇게 만들지..

JSX 기본 설정

JSX를 사용하기 위해서는 babel을 적용해야 합니다. babel은 정말 개발자들에게는 축복과도 같은 javascript 컴파일러라고 할 수 있습니다. 개발자가 익숙하고 편리한 특정 언어로 코딩을 한 다음에 babel을 돌리면 브라우저가 알아먹을 수 있도록 javascript로 변환을 해주기 때문입니다. JSX 문법도 같은 혜택을 받을 수 있습니다.
적용하는 것도 아주 간단하게 CDN 한 줄만 걸어주면 됩니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React CDN 추가</title>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

        <!-- babel 추가 -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <!-- react가 나타날 위치 -->
        <div id="root"></div>

        <!-- // javascript의 type를 text/babel로 설정해야 JSX가 번역됨 -->
        <script type="text/babel">
            const name = "홍길동";
            const element = <h1>Hello, {name}</h1>;
            //JSX를 사용하여 HTML을 Javascript로 변환 (babel이 역할을 함)
            ReactDOM.render(element, document.getElementById("root"));
        </script>
    </body>
</html>

그리고 babel이 컴파일해야 하는 구간을 알아먹을 수 있도록 script type을 "text/babel"으로 해주어야 합니다.
보통 <script type="text/javascript">이렇게 작성을 하는데 <script type="text/babel">이렇게 해야 적용이 됩니다.

JSX 문법

JSX를 사용하기 위해서 몇 가지 주의해야 할 문법이 있습니다.

표현식(Expression)

표현식은 {}로 감싸서 나타내면 됩니다. 대부분의 javascript 표현식은 모두 구현이 가능합니다.

const name = "홍길동";
const nameDetail = {
    firstName: "홍",
    lastName: "길동",
};

const element = <h1>성은 {nameDetail.firstName}이요,
이름은 {nameDetail.lastName}, 전체 이름은 {name}</h1>;

ReactDOM.render(element, document.getElementById("root"));

Function Component

아래 코드처럼 다양한 Function 형태로 컴포넌트화할 수 있습니다.

const title = "기능 컴포넌트화하기";
function Desc() {
    return (
        <h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>
    );
}
const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>;
const Footer = () => {return <p> Footer 영역입니다.</p>;};

// 함수형 컴포넌트
function App() {
    return (
        <>
            <h1>{title}</h1>
            <Desc></Desc>
            <Body />
            <Footer />
        </>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

Class Component

아래 코드처럼 Class 형태로도 컴포넌트화할 수 있습니다.

const title = "기능 컴포넌트화하기";
function Desc() {
    return (
        <h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>
    );
}
const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>;
const Footer = () => {return <p> Footer 영역입니다.</p>;};

// 클래스 형 컴포넌트
class App extends React.Component {
    render() {
        return (
          <>
            <h1>{title}</h1>
            <Desc></Desc>
            <Body />
            <Footer />
          </>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

Props 사용하기

Props를 이용하여 컴포넌트에 값을 넘길 수 있습니다. <Body>에서 title 과 desc의 속성을 넘기면 Body컴포넌트가 props로 받아서 사용할 수 있습니다.

const Body = (props) => {
    return
        <>
          <p> 제목 : {props.title}</p>;
          <p> 내용 : {props.desc}</p>;
        </>
};

function App() {
    return (
        <Body title="제목입니다." desc="설명입니다." />
    );
}

구조 분해 할당 (튜플 분해)

props를 넘길 때 구조를 분해해서 할당할 수도 있습니다. 받는 쪽에서 아예 { title, desc }으로 받아서 굳이 props를 작성할 필요 없이 바로 받아서 사용할 수 있습니다.

const Body = ({ title, desc }) => {
    return
        <>
            <p> 제목 : {title}</p>;
            <p> 내용 : {desc}</p>;
        </>
};

function App() {
    return (
        <>
          <Body title="제목입니다." desc="설명입니다." />
        </>
    );
}

조건(3항) 연산자 사용하기

jsx의 표현식을 활용할 때 if 문은 사용할 수 없고 대신에 3항 연산자로 사용할 수 있습니다. 3항 연산자란 일반적인 if 문을 축약한 형태입니다.

// 일반 if 문.
if (yn === true) {
    return <Body title="제목입니다." desc="설명입니다." />;
} else {
    return <Body title="없습니다." desc="아닙니다." />;
}

// 3항 연산자
{
    yn === true ? <Body title="제목입니다." desc="설명입니다." /> : <Body title="없습니다." desc="아닙니다." />;
}

// AND 연산자 : true 면 실행, false 면 아무것도 없음.
{
    yn === true && <Body title="제목입니다." desc="설명입니다." />;
}

JSX 사용 시 주의사항

하나의 부모 요소만 있어야 합니다.

컴포넌트는 하나의 요소로만 감싸져야 합니다. 만약 아래와 같이 하나 이상의 요소가 있으면 에러가 발생합니다.

// 이렇게 묶어주는 하나의 부모 태그가 없으면 오류가 발생함
function App() {
    return (
        <h1>{title}</h1>
        <Desc></Desc>
        <Body />
    );
}

// 아래와 같이 가상의 태그로라도 하나로 묶어주어야 정상임
function App() {
    return (
        <>
            <h1>{title}</h1>
            <Desc></Desc>
            <Body />
        </>
    );
}

class는 className로 작성해야 합니다.

jsx에서 태그의 attribute 이름으로 class를 작성할 때는 className으로 작성해야 합니다. 왜냐하면 javascript에 기본적으로 class가 있기 때문에 혼돈을 없애고자 className으로 사용해야 합니다.

function App() {
    return (
        <>
            <h1 class="abc">{title}</h1> <--// X 오류 발생
            <h1 className="abc">{title}</h1> <--// O 정상 작성
            <Desc />
            <Body />
        </>
    );
}

HTML attribute 이름 대신 camelCase 프로퍼티 명명 규칙을 사용해야 합니다

jsx에서 style를 작성할 때로 "-"가 아니라 camelCase를 사용해야 합니다.

function App() {
    const style = {
        font-size: '20px' // X 오류 발생
        fontSize: '12px' // O 정상 작동
    }

    return (
        <>
            <h1 className="abc" style={style} >{title}</h1>
            <Desc />
            <Body />
        </>
    );
}

나만 모르는 이야기 : 연식은 만렙, 정보는 뉴비

이 블로그 검색