리액트 - JSX

velopert님의 블로그에서 리액트 기초 과정을 보고 리액트를 알아가는 시간을 가졌으며,
해당 포스팅은 위 과정을 이해한대로 정리한 것이다.
(https://velopert.com/reactjs-tutorials)

리액트는 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 한다.
이전 포스팅의 hello-react프로젝트의 컴포넌트에 해당하는 코드 App.js를 열어보자.

이제 index.js 파일을 열어보자.

JSX는 무엇인가?

리액트 개발을 쉽게 하기 위해서, HTML과 비슷한 문법으로 작성하면 아를 React.createElement를 사용하는 자바스크립트 형태로 변환 시켜준다.
JSX를 제대로 사용하기 위해서 몇가지 규칙을 준수해야한다.
1. 태그는 닫혀있어야 한다.
2. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

<div>
	<div>Hi</div>
    	<div>Bye</div>
</div>

스타일 관련 설정을 하면 코드가 꼬이거나, 번거로워질 수도 있다.
이럴 땐 Fragment를 사용하자.

<Fragment>
	<div>Hi</div>
    	<div>Bye</div>
</Fragment>

JSX에서 자바스크립트 값 사용하기

값을 선언 후 바꿔야할 땐 let, 바꾸지 않을 땐 const
(둘다 scope이 블록 단위)
기존 자바스크립트는 var를 주로 사용하나, scope이 함수 단위이며 ES6에서는 쓸 일이 없다.

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 삼항 연산자를 사용하거나, AND 연산자를 사용한다.
if문을 사용 불가 ❌

삼항연산자

1 + 1 === 2 ? (<div>맞아요!</div>) : (<div>틀려요!</div>)

AND연산자

1 + 1 === 2 && (<div>맞아요!</div>)

ture, false의 경우를 모두 보여주고 싶을 때는 삼항연산자
ture의 경우만 보여주고 싶은 때는 AND 연산자

가끔씩 복잡한 조건을 작성해야 할 때는 IIFE를 사용한다.

IIFE (즉시 실행 함수)

if문

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

switch문

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

JSX에서 style과 CSS 클래스 설정

텍스트 형태로 작성했던 html과는 달리 JSX는 객체 형태로 작성!

App.css

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

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

export default App;

이예~!