[React] JSX 문법

겨레·2024년 11월 7일
리액트

[React] 리액트 스터디

목록 보기
10/95

① 감싸인 요소

컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소 하나로 감싸야 한다.

❓🤔 리액트 컴포넌트에서는 왜 요소 여러 개를 하나의 요소로 꼭 감싸야 할까?

그 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적인 비교를 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문!


  • 잘못된 문장
// 1) 잘못된 문장
import React from 'react';
 
function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 작동하니?</h2>
  )
}
 
export default App;


  • 올바른 문장
// 2) 올바른 문장
import React from 'react';
 
function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
  );
}
 
export default App;


// 3-1) div 요소를 사용하고 싶지 않을 때 (올바른 문장)
// import 구문에 react 모듈에 들어 있는 Fragment 컴포넌트를 사용하면 됨!
import React, { Fragment } from 'react';
 
function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}
 
export default App;

// 3-2) Fragment는 다음과 같은 형태로 작성 가능
// 3-1보다 간단함.
import React from 'react';
 
function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

② 자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

❓🤔 어떻게???

JSX 내부에서 코드를 { }로 감싸면 됨!

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

(+) ES6(ECMAScript 6)의 const와 let

let과 const를 사용할 때 같은 블록 내부에서 중복 선언이 불가능! 쉽게 말해 기본적으로 const를 사용하고, 해당 값을 바꾸어야 할 때는 let을 사용하면 된다.

  • const
    한번 지정하면 변경 불가능한 상수를 선언할 때 사용

  • let
    동적인 값을 담을 수 있는 변수를 선언할 때 사용

③ If 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다.

❓🤔 만약 조건에 따라 다른 내용을 렌더링해야 한다면?

  • JSX 밖에서 if 문을 사용해 사전에 값을 설정
  • { } 안에 조건부 연산자(삼항연산자) 사용

이 두 방법을 사용하면 된다.


// 예시
import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}
 
export default App;

예시 코드의 결과

이때 name 값을 다른 값으로 바꾼다면?

‘리액트가 아닙니다.’라는 문구가 뜨겠죠~?

④ AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 할 경우가 발생했다면?

조건부 연산자(삼항연산자)를 통해 구현할 수 있음!

📍 논리연산자 AND(&&)란?

  • 둘 이상의 조건이 모두 참(true)일 때 → 전체 결과 참(true) 반환
  • 둘 중 하나라도 거짓(false)일 때 → 첫 번째 false 값을 만나면 평가를 중단하고 전체 결과 거짓(false) 반환
import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}
 
export default App;

null을 렌더링하면 아무것도 보여 주지 않는데, 보다 더 짧은 코드로도 가능하다.
AND 연산자(&&)를 사용해서 조건부 렌더링을 하는 것!

import React from 'react';
 
// AND 연산자(&&) 사용
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;


(+) 알아두면 좋은 내용!

⚠️ falsy 값은 주의하자!

  • falsy란?
    자바스크립트에서 '거짓처럼 취급되는 값'을 뜻한다.
    자바스크립트에는 값 자체가 false가 아니지만, 조건문에서 false처럼 작동하는 값들이 존재하는데 이러한 값을 falsy, 그 반대는 truthy라고 한다.

  • 주요 falsy 값
    false, 0, "", null, undefined, NaN

⑤undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환해 렌더링하는 상황을 만들면 안 됨!

❓🤔 왜 undefined를 렌더링하면 안 될까?

  • 렌더링 과정에서의 오류 발생 가능성
    undefined는 화면에 그릴 수 있는 데이터 타입이 아니기 때문에 에러가 발생할 수 있으므로 컴포넌트는 반드시 null이나 JSX 요소 같은 특정한 타입을 반환해야 한다.

  • 유지보수 및 디버깅의 어려움
    의도적인 빈 화면(null 반환)이 아닌데 undefined를 반환하게 되면, 의도하지 않은 상태에서 아무것도 표시되지 않는 문제가 발생하게 된다.

❓🤔 그럼... 어떤 값이 undefined일 수도 있다면?

  • OR( || ) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있음.
// 틀린 코드
import React from 'react';
import './App.css';
 
function App() {
  const name = undefined;
  return name;
}
 
export default App;


// OR(||) 연산자를 사용한 코드
import React from 'react';
import './App.css';
 
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
 
export default App;


  • JSX 내부에서 undefined를 렌더링 가능
// JSX 내부에 undefined 사용
import React from 'react';
import './App.css';
 
function App() {
const name = undefined;
return <div>{name}</div>;
}
 
export default App;



// name 값이 undefined일 때 보여 주고 싶은 내용이 있을 때
import React from 'react';
import './App.css';
 
function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>;
}
 
export default App;

⑥ 인라인 스타일링

  • DOM 요소에 스타일을 적용할 때 문자열 형태가 아니라 객체 형태로 넣어 준다.

  • 스타일 이름 중 하이픈(-) 문자가 포함된 것은 카멜 표기법(camelCase)으로 작성한다.

// style 객체를 미리 선언하고 div의 style 값으로 지정
import React from 'react';
 
function App() {
  const name = '리액트';
  const style = {
    // 카멜 표기법으로 작성 
    // background-color -> backgroundColor 
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px', // font-size -> fontSize
    fontWeight: 'bold', // font-weight -> fontWeight
    padding: 16 // 단위를 생략하면 px로 지정됨
  };
  return <div style={style}>{name} </div>;
}
 
export default App;


// 미리 선언하지 않고 바로 style 값을 지정할 경우
import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div
      style={{
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px', 
        fontWeight: 'bold',
        padding: 16
      }}
    >
      {name}
    </div>
  );
}
 
export default App;

⑦ class 대신 className으로 설정

HTML에서 CSS 클래스를 사용할 때는 class라는 속성을 설정한다

<div class="myclass"> </div>

JSX에서는 class가 아닌 className으로 설정한다.

/* src/App.css */
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}
// src/App.js 파일
// 기존 App 컴포넌트에서 인라인 스타일에 사용한 폰트 색상과 배경색을 뒤바꾼 스타일로 
// App.js 파일에서 상단에 App.css를 불러온 뒤, div 요소에 className 값을 지정
import React from "react"
import '././common/App.css';

function App() {
 const name = '리액트';
 return <div className="react">{name}</div>;
}

export default App;

⑧ 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 하는데, 그래도 작동된다.

// 태그를 닫지 않은 HTML 코드
// 하지만 동작은 잘 됨!
<form>
  성: <br>
  <input><br>
  이름: <br>
  <input>
</form>

하지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다. 오류를 방지하려면 2-1)처럼 태그를 잘 닫아줘야 한다.

태그 사이에 별도의 내용이 들어가지 않을 경우에는 2-2)처럼 태그를 선언하면서 동시에 닫을 수 있는 self-closing 태그 를 사용하면 된다.

// 1) 태그를 닫지 않은 코드
import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input>
    </>
  );
}
 
export default App;      

// 2-1) 태그를 잘 닫은 코드
import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input></input>
    </>
  );
}
 
export default App;

      
// 2-2) self-closing 태그
import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input />
    </>
  );
}
 
export default App;

⑨ 주석

JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 조금 다르다.

👉 JSX 안에서 주석 작성하는 방법

{/* 주석 작성 방법 */}
  • // 또는 /* */ 주석의 경우에는 페이지에 그대로 나타난다.

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div
        className="react" // 시작 태그를 여러 줄로 작성하게 된면 여기에 주석 작성할 수 있음.
      >
        {name}
      </div>
      // 하지만 이런 주석이나 
      /* 이런 주석은 페이지에 그대로 나타남. */
      <input />
    </>
  );
}
 
export default App;

profile
겨레
호떡 신문지에서 개발자로 환생
이전 포스트

[React] 2장. JSX(JavaScript XML)란? 그리고 장점은?

다음 포스트

[React] ESLint와 Prettier 적용하기

0개의 댓글