React 시작하기 는 SOPT 에서 진행중인 React 스터디의 내용을 정리하여 작성될 예정입니다. 상세 내용과 샘플 코드는 https://github.com/OhKanghoon/ReactStudy 을 참조해주세요.
JSX
- JSX는 JavaScript 와 XML을 합쳐서 만든 JavaScript의 확장 문법이다.
- JavaScript 안에 마크업 코드를 작성할 수 있고, property의 바인딩도 가능하다.
- JSX는 컴파일 되면서 최적화 되므로 빠르다.
- 확장자는
.js를 사용하고 있다.
JSX를 사용해보자
create-react-app 을 사용해서 프로젝트를 생성해 보자
$ create-react-app sampleproject
생성된 폴더에서 src/App.js 를 열어보자
위에서 부터 살펴보면
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';import 문으로 ‘react’ 에서 React 와 안에 있는 Component 를 불러왔습니다.
마찬가지로 logo.svg와 App.css 파일도 불러왔습니다.
App이라는 컴포넌트를 만들었는데 위에서 import한 Component를 상속받는 클래스 형태로 생성합니다.
이 클래스에서는 필수적으로 render 함수가 필요합니다.
render: 컴포넌트에 렌더링 될 데이터를 정의함 / JSX 리턴
render 에서 반환하고 있는 JSX를 보면 HTML 같지만, JavaScript 입니다.
https://babeljs.io 에 가서 변환해보면 오른쪽과 같은 js 코드로 변환이 되는걸 확인할 수 있습니다.
XML 형태의 JSX 를 JavaScript 로 변환해야 하기 때문에 몇가지 규칙을 준수해야 하는데 밑에서 알아봅시다.
JSX 규칙
1. 태그 닫기
흔히 HTML에서 input 태그를 사용할 때 태그를 안닫는 경우가 있는데, 리액트에서는 태그를 닫지 않으면 컴파일에 실패합니다.
2. Element 감싸기
컴포넌트에서 여러 Element를 렌더링할 때 container element 안에 둬야한다.
그 이유는 리액트 컴포넌트가 구현되어 있는 .d.ts 파일을 참고하자
3. JavaScript 사용
JSX 내부에 JavaScript 값을 사용해야 할 때는 { } 를 사용한다.
4. 주석
주석은 // 나 {/* */} 을 사용한다.
5. 조건문 사용
JSX 내부에서는 if 문 을 사용할 수 없습니다. ㅜㅜ
삼항 연산자( ? : ) 와 And 연산자(&&) 를 사용하여 조건문을 사용한다.
삼항 연산자는 조건이 true, false 일 때 각각 다른 요소들을 보여줄 때 사용한다.And 연산자는 조건이 true 일 때만 보여줄 경우에 사용한다.- 복잡한 로직의 경우 JSX 밖에서 처리를 하고, JSX 내부에서 해야한다면 IIFE 를 사용하자
6. Style 과 CSS Class
JSX 에서 style 과 CSS Class 를 설정하는건 기존에 HTML에서 하던 방식과는 다르다.
- inline으로 style을 넣어주는 경우는 위와 같이 처리한다.
- HTML에서 클래스를 설정할 때 class를 사용했다면 JSX에서는 className을 사용한다.
