분류 Reactjs

React강좌 - 9 - JSX 기초

컨텐츠 정보

  • 조회 327 (작성일 )

본문

JSX는 React의 템플릿 언어입니다. JSX는 devs가 React를 처음에는 싫어한다고 말하는 주된 이유 중 하나이기도 합니다.


모든 새로운 도구와 마찬가지로 학습 곡선이 있습니다. JSX도 다르지 않습니다. 저는 JSX를 배우는 것이 여러분을 더 나은 JavaScript 개발자로 만들어 줄 것이라고 믿습니다. Vue 또는 Angular와 같은 도구보다 .map() 및 &&와 같은 핵심 자바 스크립트 기능을 배우도록 강요합니다.


JSX를 배우면 더 나은 JavaScript 개발자가 될 것입니다. 


JSX에 약간의 시간을 주면 템플릿을 작성할 때 순수 자바 스크립트를 사용할 수 있는 힘을 보게 됩니다.


JSX 란 무엇입니까? 


JSX는 단지 자바 스크립트라는 이점이 있습니다. 이것은 JavaScript의 확장이며 템플릿 언어와 비슷하지만 JavaScript의 모든 기능을 갖추고 있습니다.


다음은 요소의 간단한 예입니다.


const myElement = <h1>WHOA I am some JSX</h1>;

이 코드는 문자열도 HTML도 아닙니다. JSX는 이를 우리의 애플리케이션을 업데이트 할 React 요소로 변환 할 것이다.


JSX의 사례와 React 애플리케이션에서 JSX를 사용하는 방법에 대해 살펴 보겠습니다.


JSX 변수 및 표현식 


중괄호{}를 사용하여 JSX에 변수와 표현식을 추가 할 수 있습니다. 이 괄호 안에 있는 것은 JSX에서 내부의 모든 것을 평가하는 표시기입니다.


변수를 표시하는 방법은 다음과 같습니다.


function App() {
    const name = 'Chris';

    return (
        <h1>My name is {name}</h1>
    );
}

우리가 객체 같은 문자열 변수 이상을 가지고 있을 때 우리는 객체 속성에 접근하여 그것을 보여줄 수 있습니다:


function App() {
    const person = {
        name: 'Chris',
        age: 30
    };

    return (
        <h1>My name is {person.name} and I'm [person.age} years old.</h1>
    );
}

괄호로 JSX에게 무엇이든 평가하도록 말할 수 있습니다. {3 + 4}와 같이 중괄호 안에 유효한 JavaScript 표현식을 만들 수도 있습니다.


function App() {     
    return (
        <h1>We can add things like: {3 + 4}</h1>
    );
}

JSX가 우리를 위해 무엇을 할 수 있는지 살펴 보겠습니다.



JSX CSS 클래스 


JSX 템플릿에 CSS 클래스를 추가하려면 class 대신 className을 사용해야 합니다. React가 클래스 대신 className을 사용하는 이유에 대한 좋은 설명이 있습니다. JSX 코드가 React가 템플릿을 생성하는 방법과 매핑되는 방법을 주로 다루고 있습니다.


title이라는 이름의 클래스와 is-2라는 클래스를 추가하고자 한다면 다음과 같이 작성할 것입니다 :


function App() {     
    return (
        <h1 className="title is-2">I've got a class!</h1>
    );
}

JSX 스타일 


템플릿에 인라인 스타일을 추가하려면 스타일 속성에 객체를 전달하면 됩니다. 우리가 보통 HTML과 같이 인라인 문자열을 작성하는 대신, 객체를 전달합니다. JSX는 적절한 스타일로 변환됩니다.


function App() {     
    return (
        <h1 style={{ color: 'red', marginBottom: '30px' }}>I've got styles!</h1>
    );
}

스타일을 전달하기 위해 객체를 사용해야 한다는 것이 약간 이상하게 보일 수도 있지만 이 접근 방식은 많은 이점을 제공합니다. 인라인 스타일 안에서 변수를 사용할 수 있습니다!


function App() {
    const isActive = true;
    const headerColor = isActive ? 'green' : 'red';

    return (
        <h1 style={{ color: headerColor }}>I've got styles!</h1>
    );
}

JSX는 자바 스크립트를 사용하여 템플릿을 만들었기 때문에 많은 유연성을 제공합니다.


참고 : 가능할 때마다 인라인 스타일을 사용하지 않는 것이 중요합니다. CSS/Sass를 사용하면 이 모든 스타일을 템플릿에서 제거할 수 있습니다.


JSX로 템플릿 쉽게 만들기 


JSX는 약간의 학습 곡선을 가지고 있지만, 일반적인 작업이 완료된 방법을 보고 나면 애플리케이션에서 JSX를 더 많이 사용할 수 있습니다.


더 많은 JSX를 사용하기 시작하면 자바 스크립트를 사용하여 애플리케이션을 템플릿화하는 가치를 알게 됩니다. 앞으로 몇 개의 게시물에서 더 많은 JSX를 살펴보고 JSX가 핵심 JavaScript 구문에 대해 더 많이 가르쳐주는 방법을 살펴 보겠습니다.



JSX