JSX 기본 문법 알아보기

React/velopert_react

JSX 기본 문법 알아보기

느리지만 꾸준하게 2021. 8. 18. 14:52

JSX에 문법에 대해서 알아보자. JSX는 Html같지만 JavaScript로 변환이 된다.

리액트 컴포넌트를 사용할 때 사용하는 문법이다.

Html이랑 비슷하지만 지겨야 할 규칙이 몇 가지가 있다. 살펴보자.

첫번째 태그는 꼭 닫혀 있어야 한다.

즉 div태그 열었으면 /div 닫아줘야 한다는 것이다.

아래와 같이 코드를 작성하면 오류가 난다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <input type="text">
      </div>
    );
  }
}

아래와 같이 input text 뒤에 /를 붙엿 작성하게 되면 오류가 나지 않는다.

언제나 꼭 닫아줘야 한다. 즉 self closing tag를 통해서 한번 연 태그를 그자리에서 닫는다라고 보면 된다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <input type="text" />
      </div>
    );
  }
}

다음으로는 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

즉 모든태그가 두개이상이 되면 하나로 감싸줘야 한다. 아래코드는 태그가 두개이상이니까 하나로 감싸주었다. 그러나 이렇게 하면 불필요한 div태그가 생기게 된다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <div>Hello</div>
        <div>Bye</div>
      </div>
    );
  }
}

export default App;

뭔가 이상한 느낌이 들지 않나?

가끔씩은 두 태그를 렌더링 하기위해서 추가적인 div태그를 하나 더 만들어야 한다는게 조금 이상하다.

이 부분은 React v16.2에서 Fragment라는 것이 생겨서 이걸 쓰면 된다. 아래를 검사(F12)하게되면 extra div가 없는 것을 볼 수 있다.

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>Hello</div>
        <div>Bye</div>
      </Fragment>
    );
  }
}

export default App;

이번에는 JSX안에서 자바스크립트 값을 사용하는 법을 알아보자.

name이라는 값을 밑에 자리에 그대로 나타나게끔 해본다. 이런 작업을 할 때는 {} 중괄호를 쓴다.

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const name = 'velopert!';
    return <div>hello {name}</div>;
  }
}

export default App;

const가 생소할 수도 있다. 여기를 참고하면서 보자.

var와 let과 const를 비교해보자.

var를 보면 true이면 밑에 값이 언제나 실행되니까 콘솔을 찍으면 bye가 나타나고

블록이 끝난 후에도 마지막 콘솔을 찍어보면 bye가 나타나게 된다.

블록에서 a를 bye로 설정해뒀는데 블록 바깥의 값도 bye로 바꼈다. 이게 스코프가 함수단위여서 그렇다.

즉 a의 값이 유효한 곳은 처음 블록부터 끝에 콘솔까지인 것이다.

let같은 경우도 hello로 선언을 해주었다. true밑에 또 let을 선언해서 bye라고 해주었다. 처음 콘솔로그 했을 때 bye가 나타나고 블록 바깥에서 콘솔로그를 했을 때는 처음에 선언했던 hello값이 나타나게 된다.

즉 let과 const의 경우에는 스코프가 블록단위로 되어있다. 그래서 true의 let값은 블록안에서만 유효하고 처음 let값은 마지막 콘솔까지 유효하다. 블록내부에서는 콘솔이 bye인 것이고 외부에서는 hello인 것이다.

그렇다면 var const let은 어떤상황에서 사용해야 할까..

일단 var같은 경우는 es6에서 더 이상 사용하지 않고 const같은 경우에는 한번 선언 후에 고정적인 값을 사용할 때 선언하면 되고

let같은 경우는 한 번 선언하고 나서 바뀔 수도 있는 값을 사용할 때 let을 사용하면 된다.

다음으로 조건부 렌더링에 대해서 보자

리액트에서 삼항연산자를 사용해서 활용할 수 있다.

아래와 같이 구현 할 수 있다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>{1 + 1 === 2 ? <div>맞아요!</div> : <div>틀려요!</div>}</div>;
  }
}

export default App;

// 맞아요!

또는 특정값이 true일때만 보여지게 하고 false일 때는 안보여지게 하고 싶다라고 할 수 있는데 아래 코드를 보자.

이렇게 && 연산자를 사용해서 조건부 렌더링을 할 수도 있다.

조건이 여러개가 될 수도 있는데

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'velopert!';
    return <div>{name === 'velopert!' && <div>벨로퍼트다!</div>}</div>;
  }
}

export default App;

// 벨로퍼트다!

아래와 같이 IIFE라고 해서 함수를 선언하고 즉시 실행하는 방식도 사용할 수 있다. 여기에 if문 대신에 switch문을 넣어도 상관없다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
            return <div>없다</div>
          })()
        }
      </div>
    );
  }
}

export default App;

// 하나

다른 방식으로 arrow function을 사용해서 표현할 수도 있다. 화살표 함수는 es6에서 자주사용하니까 여기도 참고하자.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (() => {
          // this.arguments, super 개념이 없다
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
            return <div>없다</div>
          })()
        }
      </div>
    );
  }
}

export default App;

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

리액트를 누구든지 쉽고 재밌게 시작 할 수 있도록 만들어진 강좌입니다., React 핵심 강좌 초심자를 위한 리액트(React) 핵심 강좌입니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔

www.inflearn.com

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

let - JavaScript | MDN

let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

const - JavaScript | MDN

const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.