React JSX 문법과 예제 정리

🔎 JSX란?

---

• JSX는 자바스크립트의 확장 문법이다. React에서 HTML을 표현할 때 JSX를 사용한다. 즉, 자바스크립트의 공식적인 문법은 아니다.
• 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이다.

 

• JSX를 사용하지 않은 React Element

const element = React.createElement(
    "div", null, React.createElement(
      "a", null, "Hello World", ""
    )
  );

 

• JSX 문법 사용

const element = (
    <div>
        <a> {"Hello World"} </a>
    </div>
);

 

🔎 JSX 문법

---

💡 반드시 부모 요소는 한 개의 태그로 감싸져 있어야 한다.

function App() {
    return (
        <div>
            <div>이것이바로</div>
            <div>올바른방법</div>
        </div>
    );
}

function App() {
    return (
        // div 요소를 쓰고 싶지 않은 경우 1번
        <Fragment>
            <div>이것이바로</div>
            <div>올바른방법</div>
        </Fragment>
    );
}

function App() {
    return (
        // div 요소를 쓰고 싶지 않은 경우 2번
        <>
            <div>이것이바로</div>
            <div>올바른방법</div>
        </>
    );
}

• div 요소를 사용하고 싶지 않을 때 Fragment라는 기능을 사용한다. Fragment는 <>과 같은 형태로도 표현할 수 있다.
• 하나의 요소로 감싸야 하는 이유 ⇒ virtual DOM에서 컴포넌트 효과를 효율적으로 감지하여 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리로 구성되어 있어야 한다.

 

💡 JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 코드를 {}로 감싸주면 된다.

function App() {
    const id = "trustmitt";
    return (
        <div>
            <div>Hello</div>
            <div>{id}!</div>
        </div>
    );
}

 

 

💡 if문, for문 대신 삼항 연산자를 사용한다. if문이나 for문을 사용해야 하는 경우에는 JSX 밖에서 사용한다.

function App() {
    const id = "trustmitt";
    return <div>{id == "trustmitt" ? <div>밋입니다</div> : <div>아닙니다</div>}</div>;
}

// if문 사용 예제
function App() {
    const id = "trustmitt";
    if (id == "trustmitt") {
        item = <div>밋입니다</div>;
    } else {
        item = <div>아닙니다</div>;
    }
    return <div>{item}</div>;
}

 

💡 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황에 && 연산자를 사용한다.

function App() {
    const id = "trustmitt";
    return (
        <div>
            {/* "밋입니다" 만 렌더링 */}
            {id === "trustmitt" && <div>밋입니다</div>}
            {id === "nottrustmitt" && <div>아닙니다</div>}
        </div>
    );
}

 

💡 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안 된다.

function App() {
    // 오류 발생 코드
    const item = undefined;
    return item;
}

function App() {
    // JSX 내부에서 undefined를 렌더링 하는 경우 오류가 생기지 않는다
    const item = undefined;
    return <div>{item}</div>;
}

function App() {
    // OR 연산자를 통해 오류 방지
    const item = undefined;
    return item || "undefined 입니다";
}

 

💡 클래스 정의 시 class가 아닌 className을 사용한다.

function App() {
    return (
        <div>
            <div className="container"></div>
        </div>
    );
}

 

🔎 Reference

---

https://im-designloper.tistory.com/79

https://www.nextree.io/jsxmunbeobgwa-seontaegjeog-rendeoring/

https://goddaehee.tistory.com/296

https://chanhuiseok.github.io/posts/react-3/

https://developerntraveler.tistory.com/54