TIL(2020.12.09)

김지민·2020년 12월 9일

JSX React TIL

TIL

목록 보기

2/28

1. JSX 기본문법

JSX란?
리액트를 작성할 때 사용하는 기본문법. HTML이랑 비슷하지만 몇 가지 규칙이 있음.

1. 태그는 꼭 닫혀있어야 한다.

html에서는 input이나 br같이 가끔 안닫고 쓰는 태그가 있는데 리액트에서는 동일 태그 반복을 이용해 태그를 닫지 않으면 에러가 발생함(Unterminated JSX contents. JSX 콘텐츠가 끝나지 않았다)
Self-closing Tag는 html과 동일하게 사용가능(ex. input, br)

2. 두개 이상의 elements는 반드시 하나의 element로 감싸져 있어야 한다.

//예
return (
<div> hello </div>
<div> Bye </div>
);
//must be wrapped error

return (
<div>
<div> Hello </div>
<div> Bye </div>
</div>
// Good!

그런데 element를 감싸기 위해 불필요한 추가 element를 사용하기 싫다면
react v16.2부터 추가된 Fragment 기능을 사용하면 된다.
element들에 대해 Fragment 태그로 감싸주면 코드상으로 불필요한 div가 조회되지 않음.
Fragment 사용 전 문서 상단에서 component와 같이 Fragment import 필요

3. JS값 사용하기

JSX내부에서 변수 등 자바스크립트 값을 이용할 수 있다.

변수 사용시 js처럼 호출 전 변수선언이 되어야 하며 중괄호 내에서 호출해 사용

//예
<div>hello {변수명>!</div>

js의 var, const, let 개념 그대로 적용됨

4. 조건부 렌더링

조건에 따라 화면 구성을 표시하는 것
JSX 내부에서 조건부 렌더링을 할 때에는 보통 삼항연산자 또는 AND연산자 사용

//삼항연산자를 사용한 예
import React, { component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2
            ? (<div>Yes</div>)
            : <<div>No..</div>)
        }
      </div>
    );
  }
  }
  
  export default App;

삼항연산자를 사용해 조건부 렌더링을 구성할 때에는 위와 같은 형식으로 사용하게 된다.
삼향연산자를 이용할 때에는 true일때와 false일때 각각 다른 결과물을 보여줄 때 사용함.
AND연산자는 true만 보여주고 false일때에는 아무것도 표시하지 않음.

//AND연산자 사용예
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>Yes!</div>)
        }
      </div>
    );
  }
  }
  
  export default App;

대부분 위의 두가지 연산자 사용법을 통해 해결하지만 가끔씩 복잡한 조건을 작성해야 할 때에는 JSX외부에서 로직을 작성하는 것이 좋음.
하지만 꼭 JSX 내부에서 작성해야 한다면 IIFE(즉시실행함수) 사용.
즉시실행함수를 사용할 때에는 if문을 사용할 수 있다.

///IIFE 사용예
import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>one</div>);
            if (value === 2) return (<div>two</div>);
            if (value === 3) return (<div>three</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

위의 IIFE에서 if문을 사용했는데, if문과 화살표함수를 같이 사용하면 더욱 간단하게 코드를 작성할 수 있다.

///if문+화살표함수
(() => {
  if (value === 1) return (<div>one</div>);
  if (value === 2) return (<div>two</div>);
  if (value === 3) return (<div>three</div>);
})()