React스터디_JSX문법

Jason Kim·2020년 8월 4일
0

React 스터디

목록 보기
2/14

JSX문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
부모 요소 하나로 감싸지 않을 경우 다음과 같은 오류가 나타날 것이다.

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸주어야하는가?

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는
하나의 DOM 트리구조로 이루어져야 한다는 규칙때문이다.

<div><h1>안녕</h1></div> or <Fragment><h1>안녕</h1><Fragment>

위와 같이 여러 요소를 하나의 부모 요소로 감싸줄 수 있다.
<Fragment></Fragment> 의 경우 리액트v16 이상부터 사용가능하며,
<></>와 같이 사용가능하다.

Fragment를 사용하기 위해서는 import React, {Fragment} from 'react';
구문을 작성하여 Fragment 라는 컴포넌트를 추가로 불러와야 사용이 가능하다.

2. 자바스크립트 표현

자바스크립트 표현식을 사용하기 위해서는 JSX내부에서 코드를 { }로 감싸면 된다.

src/App.js

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

3. If문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서는 if문 사용이 불가하다.
하지만 조건에 따라 다른 내용을 렌더링을 해야 할 때는
JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

src/App.js

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

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

개발중에 특정조건을 만족할 때 내용을 보여주고, 그렇지 않을 땐 아무것도 렌더링하지 않는 상황일때

src/App.js

import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}
 
export default App;

or

import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;
  • 위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않는다.

&&연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때 null과 마찬가지로 아무것도 나타나지 않기 때문이다. 그러나 예외도 있다. false한 값이 0일때는 화면에 0이 나타난다.

5. undefined 렌더링 하지 않기

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

src/App.js

import React from 'react';
import './App.css';
 
function App() {
  const name = undefined;
  return name;
}
 
export default App;
  • 다음과 같이 코드를 작성할 경우에는 아래와 같은 오류가 나타난다.
App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

OR(||)연산자

OR(||)연산자를 사용하면, undefined일 때 사용할 값을 지정할 수 있어 오류방지가 가능하다.

import React from 'react';
import './App.css';
 
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
 
export default App;
  • 아래 코드와 같이 JSX내부에서 undefined를 렌더링하는 것은 가능하다.
function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>;
}

6. 인라인 스타일링

DOM요소에 스타일을 적용할 땐 문자열이 아닌 객체 형태로 -를 없애고 카멜 표기법(camelCase)으로 작성.
ex) background-color => backgroundColor

스타일 적용 방법

  1. 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;
  1. style객체를 미리 선언하지 않고 바로 style값을 지정하는 방법
import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div
      style={{
        // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px', // font-size -> fontSize
        fontWeight: 'bold', // font-weight -> fontWeight
        padding: 16 // 단위를 생략하면 px로 지정됩니다.
      }}
    >
      {name}
    </div>
  );
}
 
export default App;

7. class대신 className

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

src/App.js

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

class로 설정할 경우 스타일은 적용이 되나 console탭에서 오류가 발생한다.

Warning: Invalid DOM property `class`. Did you mean `className`?
in div (at App.js:6)
in App (at src/index.js:7)

8. 꼭 닫아야 하는 태그

JSX에서는 태그를 닫지 않을시 오류가 발생한다.
태그와 태그사이에 내용이 없을 경우 self-closing태그 선언을 하면 오류를 막을 수 있다.
ex) <input />

9. 주석

JSX 내부에서 주석을 작성할 때는 {//}와 같은 형식으로 작성합니다. 이렇게 여러 줄로 작성할 수도 있습니다. 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // …과 같은 형태의 주석도 작성할 수 있습니다.

src/App.js

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div
        className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나 
      /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
      <input />
    </>
  );
}
 
export default App;
profile
안녕하세요. 프론트엔드 개발자 준비생입니다.

0개의 댓글