[React]기초 - JSX 문법

리액트에서는 JSX라는 문법을 사용해야 한다.

그렇다면 JSX는 무엇일까 ??

 

JSX 

JSX는 리액트를 만든 페이스북에서 리액트를 좀 더 잘 사용하기위해 만든 문법이다.

자바스크립트를 확장한 문법으로, 마치 html과 자바스크립트를 섞여놓은 듯한 모습을 하고 있다. 

JSX문법은 여러개의 특징을 가지고 있는데 이 특징을 지켜 사용해야 한다.

 

JSX 특징

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되야 한다.

2. 클래스 사용시, class가 아닌 className을 사용한다.

3. 자바스크립트를 사용할 땐, 중괄호를 이용한다.

4. 사용자 정의 컴포넌트는 대문자로 시작해야 한다.

5. 조건부 렌더링에는 삼항연산자를 사용한다. 

6. 여러개의 html 엘리먼트를 표시할 때는 map함수를 사용한다.

---

이러한 특징들을 하나씩 자세히 살펴보자.

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되야 한다.

 

잘못된 방식

일반적인 html에서는 이렇게 사용하는 것이 가능하나 ,

JSX문법에서는 하나로 묶어줘야한다.

올바른 사용법

위의 잘못된 방식과 비교해봤을 때 가장 상단에 div를 하나더 생성해

전체를 감싸는 것을 확인할 수 있다. 물론 div가 아니라 다른 엘리먼트여도 상관없다.

 

2. 클래스 사용시, class가 아닌 className을 사용한다.

잘못된 방식

정말 간단한거지만 왜 에러가 나는걸까? 살펴보면 이 부분이 잘못된 경우가 많다.

class가 아닌 className을 사용한다.

올바른 사용법

 

3. 자바스크립트를 사용할 땐, 중괄호를 이용한다.

자바스크립트 문법으로 작성된 변수 sum을 불러오기 위해서는 

중괄호를 써줘야 자바스크립트로 작성된 sum를 말하는구나 라고 JSX가 알아차릴 수 있다

 

4. 사용자 정의 컴포넌트는 대문자로 시작해야 한다.

특징3에서 함수 이름을 add가 아닌 Add라고 적은 것처럼, 대문자로 시작해야 한다.

만약 소문자 add로 적었다면 JSX는 이를 일반텍스트로 인식한다.  

 

5. 조건부 렌더링에는 삼항연산자를 사용한다. 

조건부를 사용할 때 일반적으로 if문을 사용하지만, JSX문법에서는 삼항연산자를 이용해야한다.

조건문 ? ture일때 나올값 : false일때 나올값

 

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어갑니다. 보통 if 명령문의 단축 형태로 쓰입니다.

[출처:삼항연산자 MDN]

 

 

6. 여러개의 html 엘리먼트를 표시할 때는 map함수를 사용한다.

langs이라는 변수에 이렇게 여러가지 정보가 담겨있을 때는 map함수를 이용해서 불러오면 된다.

map을 이용한 사용법