[React] JSX

기본 코드로 시작!

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

1. import React, { Component } from 'react'

• React: 리액트를 사용하기 위해서 명시해주는 것
• { component } from 'react': 설치되어있는 react 모듈을 불러들여와서 사용하겠다는 의미.

2. class App extends Component

• class
  컴포넌트를 만드는 가장 기본적인 방법인 class.
  (다른 방법은 함수를 사용하는 것)

3. render() {}

• render 메소드
  꼭 jsx형태의 코드를 return해주어야 한다.

JSX

jsx는 html코드 처럼 생겼지만 자바스크립트로 변환된다. 이것이 리액트 컴포넌트를 작성할 때 사용되는 문법인데 html과 비슷하지만 지켜야할 문법이 몇가지 있다.

1. 태그는 꼭 닫아준다.
   html에서는 <input>이나 <br>같은 태그는 단독으로도 사용이 가능했지만 리액트에서는 오류가 난다. 따라서 <input type="text"> </input>을 해주던가 <input type="text" /> (self closing tag)를 해준다.

2. 두개 이상의 엘리먼트는 꼭 하나의 엘리먼트로 감싸줘야 한다. 하지만 두개를 렌더링 하기 위해 추가적인 태그를 하나 추가하는 것이 별로라면 리액트 16.2에서 도입 된 fragment를 사용한다.

import React, { Component } from 'react';

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

export default App;

에서

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

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

export default App;

이렇게!

둘 중 아래의 방법처럼 만들고 개발자모드로 보면 두 개의 div태그를 감싸는 불필요한 태그가 보이지 않는다.

3. jsx안에서 js값 사용하기

const name = 'react';
return (
  <div>	
    hello {name}
  </div>
);

• var, let, const
  var에서 변수의 값이 적용되는 스코프는 함수이다.

function foo(){
  var a = 'hello';
  if (true) {
    var a = 'bye';
    console.log(a); //bye
  }
  console.log(a); //bye
}

let과 const는 스코프가 블록단위이다.

function foo(){
  let a = 'hello';
  if (true){
    let a = 'bye';
    console.log(a); //bye
  }
  console.log(a); //hello
}

그렇다면 var, const, let은 어떤 상황에 맞게 선택해야할까?
1. var는 ES6에서 더이상 사용되지 않는다.
2. const는 한번 선언 후 고정적인 값이 들어가는 상황에 쓴다.
3. let은 유동적인 값을 넣어줄 때 사용한다.

4. 조건부 렌더링
   위 3번에서 리액트에서 js값을 사용할 때 중괄호 안에 변수를 넣어주면 된다고 했지만 저 안에 if문 같은 조건문은 넣을 수 없다. 그래서 보통 삼항 연산자를 이용한다.

import React, {component} from 'react';

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

삼항연산자 말고 AND연산자를 사용할 수도 있다.

import React, { Component } from 'react';

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

export default App;

조건이 여러개일 때는 jsx 바깥에서 하는 것이 일반적이긴 하지만 jsx 내부에서도 구현을 할 수는 있다. IIFE를 사용해서!

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>);
          })()
        }
      </div>
    );
  }
}

export default App;

이처럼 함수를 작성하고 바로 호출해주면 된다.
화살표 함수라는 문법으로도 가능하다.
화살표 함수는 this, arguments, super의 개념이 없는 함수다.

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

---

인프런 강의 [velopert(김민준), 누구든지 하는 리액트: 초심자를 위한 react핵심 강좌]를 들으며 정리한 내용입니다.