[React] JSX / const, let, var

JSX

- Class Component에서 Render를 통해 return하는 코드 또는 Function Component에서 return하는 코드를 의미함.

- Javascript의 확장 문법/XML과 유사

- 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 babel을 사용하여 일반 Javascript 형태로 변환됨

 

- babel을 통한 변환 전 code (Before)

function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
   	);
}

 

- babel을 통한 변환 후 code (After)

function App() {
	return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

 

- JSX 문법 주의 사항

    1. Component의 반환 코드는 하나의 요소여야 한다. 여러 요소가 있을 경우, 반드시 부모 요소 하나로 감싸야 한다.

      → Error log : Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

      → 단점 : Style 적용 시, 각 코드 별로 꼬이지 않게 적용해주어야 함.

      → 이유 : Virtual DOM에서 Component 변화를 감지할 때 효율적인 비교를 위해 DOM Tree 구조를 이루기 위함.

      → Fragment : React v16 이상부터 도입됨. <div></div>로 감싸주는 것이 아닌 <></>로 감싸줄 수 있음

 

    2. 조건부 연산자/삼항 연산자 (if문 사용 안됨)

      → JSX 코드 내 예시 : { check === true ? (<h1>true</h1>) : (<h1>false</h1>) }

      → 조건에 따라 render가 가능함.

 

    3. AND 연산자(&&)을 사용한 조건부 렌더링

      → JSX 코드 내 예시 : { check === true && <h1>true</h1> }

      → check가 true일 때만 렌더링 되고, 그 외의 경우 null과 마찬가지로 동작함.

 

    4. undefined를 렌더링하지 않기

      → JSX 코드 내 예시 : <div>{ check || "true value" }</div>

      → check에 값이 있을 때 check값이 표현되고, undefined일 때 true value가 표기됨.

 

    5. 인라인 스타일링(Inline Styling)

      → React에서 DOM 요소에 style을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야 함.

      → style 이름 중 background-color와 같은 경우는 카멜 표기법으로 backgroundColor로 사용해야 함.

      → JSX 코드 내 예시 : <div style={{ backgroundColor: "white" }}> test </div>

 

    6. class 대신 className

      → JSX에서는 class가 아닌 classname으로 설정해주어야 함.

      → JSX 코드 내 예시 : <div className="test"> test </div>

      → class를 사용해도 되지만, Warning이 뜨게 됨.

 

    7. 꼭 닫아야 하는 태그

      → 태그의 경우, 닫지 않았을 때 Parsing error가 발생함.

      → self-closing : 선언과 동시에 닫는 태그, ex) <input />, <div />, <button />

 

    8. 주석

      → {/* 주석 작성 방법 */}

      → 중괄호, { }를 통해서 감싸주어야 함.

 

---

const, let, var 비교

	const	let	var
용도	ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드	동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드	ES6 이전에는 var 키워드를 사용함. var 키워드는 scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위임.
변수 재선언	불가능(immutable)	불가능(immutable)	가능
재할당	불가능	가능	가능
Scope	Block-scope	Block-scope	Function-scope