📑 [React] JSX

 

자바스크립트에서는 함수가 HTML을 리턴하도록 만들 수가 없다.

그렇게 하면 문법적인 오류라고 판단하게 됩니다.

 

하지만 React에서는 JSX(Javascript Extentions) 라고 불리는 확장된 자바스크립트의 문법을 이용하기 때문에

이러한 코드를 오류로 판단하지 않게 되는됩니다.

 

function Footer() {
	const myName = "kim";
    
    return (
    	<footer>
        	<h1>안녕 내 이름은 {myName}이야</h1>
            <h1>footer</h1>
        </footer>
    );
}

 

단순히 지금처럼 함수가 HTML 태그를 리턴하는 수준을 넘어서

컴포넌트 내부에 변수를 하나 선언한 다음에 이 변수의 값을 이렇게 중괄호 안에 넣어

HTML을 렌더링 하도록 설정해 줄 수가 있습니다.

 

JSX라는 문법을 이용하면 이렇게 동적으로 특정 변수의 값을 HTML로 렌더링 하도록 설정해 줄 수 있습니다.

 

---

 

JSX 주의사항

 

 

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.

 

이때 자바스크립트 표현식이란 코드가 특정한 값으로 평가될 수 있는 식을 말합니다.

for나 if 문 등 반복문이나 조건문을 사용하면 오류가 발생하게됩니다.

이는 한 줄로써 값으로 평가될 수 없기 때문에 자바스크립트 표현식이라고 볼 수가 없기 때문입니다. 

 

 

2. JSX 숫자, 문자열, 배열 값만 렌더링 된다.

 

숫자나 문자열이나 배열은 정상적으로 잘 렌더링 되지만

예를 들어 boolean 값이나 undefined, null과 같은 값은 중괄호 내부에 사용했을 때

 

오류를 발생시키진 않지만 화면에 렌더링도 되지 않습니다.

그래서 숫자나 문자열 배열만 화면에 렌더링 됩니다.

 

만약 컴포넌트 함수 내에 객체 값이 있는 경우에는 그대로 JSX로 렌더링 시켜주려고 하면

 오류가 발생하므로 백지가 렌더링 됩니다.

 

Object are not valid as React << 그냥 객체는 렌더링 할 수 없다는 뜻입니다.

그래서 이러한 객체 값이 있다면 점표기법으로 이용해서 문자열이나 숫자 값을 렌더링 하도록 바꿔줘야합니다.

 

 

3. 최상위 태그는 반드시 하나여야 한다.

 

 

 

jsx에서는 최상위 태그를 딱 하나만 허용합니다.

그렇기 때문에 최상위 태그로 감쌀 만한 마땅한 태그가 없다면 빈 태그로 묶어주면 충분합니다

jsx에서는 문법상 빈 태그로 묶어 최상위 태그를 표시해도 실제로 렌더링 될 때에는 

최상위 태그가 없는 것 처럼 렌더링 되기 때문에 간편하게 다룰 수 있습니다.