[React] JSX 개념, 문법, 스타일링 요약 정리

1. JSX란?
2. 문법

3. 스타일링

---

JSX란?

JSX란 JavaScript + XML로 자바스크립트 내부에  HTML을 작성하는 확장된 자바스크립트 문법이다. 

---

JSX를 사용하지 않고 <div>를 만드는 경우

fucntion App() {
	return React.createElement('div', null, 'Hello World')
}

 

JSX로 작성하면 아래와 같이 <div></div> 태그만 작성하면 된다.

function App() {
	return (
    	<div>Hello World</div>
    )
}

 

이후 바벨을 이용하여 우리가 아는 자바스크립트 코드로 변환된다. 바벨은 ES6 이상 혹은 JSX 같은 코드를 브라우저가 이해할 수 있는 자바스크립트 코드로 변환해주는 자바스크립트 트랜스 컴파일러이다. 

JSX를 사용하면 JS 코드 안에서 UI 관련 작업을 할 수 있기 때문에 편리하게 코드를 짤 수 있고, 가독성이 좋다.

---

JSX 문법

1. return하는 요소는 하나여야한다.

렌더링 될 리액트 요소에서 루트 요소가 두 개 이상인 경우, 아래와 같이 에러가 발생한다. 

부모태그가 없는 경우

Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있다. 따라서 리액트에서는 반드시 컴포넌트에 여러 요소가 있다면 아래와 같이 부모 태그로 감싸져야한다. 

function Modal () {
 return (
    	<div>
        	<h4>제목</h4>
        </div>            
    );
}

 

 

2. 자바스크립트 변수를 전달해 사용할 수 있다. 

중괄호 {}로 감싸서 자바스크립트 변수를 사용할 수 있다. 

id에도 사용할 수 있음 id={post}

 

3. 삼항연산자

return() 안의 JSX 내에서 if문 사용이 불가능하다. 조건문을 사용하기 위해서는 JSX 밖에서 사용하거나 JSX 내부에서는 삼항연산자를 사용해야한다. 또는 if문을 즉시 실행함수 형태로 작성하면 return() 안에서도 사용할 수 있다. 

로직이 복잡한 경우에는 JSX 밖에서 조건문을 처리하고 JSX 코드는 간단하게 작성하는 것이 좋다. 

 

삼항연산자는 아래와 같은 형식으로 작성한다. 

조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

 

function Component() {
 return (
  <div>
   {
   	 1 === 1 ? <p>참이면 보여줄 HTML</p> : null
   }
  </div>
 )
}

 

 

4. && 연산자와 || 연산자로 if 역할 대신하기

//AND 연산자
function Component() {
 return (
  <div>
   { 1 === 1 && <p>참이면 보여줄 HTML</p>}
  </div>
 )
}

 

 

AND 연산자를 사용하면 왼쪽 조건식이 true면 오른쪽 JSX가 렌더링되고, 왼쪽 조건식이 false면 false가 리턴된다. 

//OR 연산자
function Component() {
 return (
  <div>
   { 1 === 2 || <p>거짓이면 보여줄 HTML</p>}
  </div>
 )
}

 

OR 연산자를 사용하면 반대로 왼쪽 조건문이 참이 아닌 경우 뒤의 내용이 렌더링된다. 

 

5. null과 undefined

JSX에서 null은 아무것도 렌더링하지 않고 문제도 발생하지 않는다. 하지만 undefined는 에러가 발생한다. 따라서 undefined가 리턴되지 않도록 신경써야 한다. 

 

6. 주석은 {/* ... */}

태그 안에서 작성하는 주석은 // 사용

---

스타일링

1. class 넣을 땐 className을 사용한다. 

 

2. style 넣을 땐 style = {} 무조건 중괄호 열어서 스타일을 작성해야된다

style={{스타일명 : '값'}}

font-size와 같이 여러개의 단어로 되어있는 건 하이픈으로 표기하지 않고, 카멜표기법(fontSize)으로 작성한다.