이제 본격적으로 리액트에를 알아보려고 합니다. 리액트 문법인 JSX를 소개합니다.
JSX
리액트에서 사용하는 자바스크립트의 확장문법, JSX문법은 정식적인 자바스크립트 문법은 아닙니다.
function App(){
return (
<div>
<p>안녕하세요</p>
</div>
)
}이런 형식으로 작성한 코드는 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트로 변환됩니다.
function App(){
return React.createElement("div",null,"안녕하세요")
}이런식으로 말이죠
JSX문법 사용시 주의사항
import {fregment} from 'react'; //fregment 사용시 필요합니다.
function App(){
return (
//<div> and <fregment> or <>
<p>안녕하세요</p>
<p>김태형입니다.</p>
//</div> and </fregment> or </>
)
}위 코드는 에러를 발생시킵니다. virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 하나에 내부는 꼭 하나의 DOM 트리구조로 이루어져야 한다는 규칙을 가지고있기 때문입니다.
타코야끼 열개를 한 박스에 담는걸 생각해보세요!
JSX 특별한 기능
JSX 내부에서 자바스크립트 표현식을 사용할 수 있습니다.
const hi = "안녕하세요";
function App(){
return (
<div>
<p>{hi}</p>
</div>
)
}위와 같이 사용이 가능합니다!
표현식 사용시 주의사항
JSX 내부에서는 자바스크립트에서 "문" 으로 분류되어있는 if, for, swich 등은 사용할 수 없습니다.
그말인 즉슨, 코드가 평가되었을때 "값" 인 표현식만 사용이 가능하다는 것인데요.
자바스크립트는 표현식(expression)과 문(statement)으로 이루어져 있습니다.
표현식 또한 문입니다. 다만 가장 큰 차이는 문이 평가되었을때 값이 된다는 점입니다. 가장 쉬운 확인 방법은 변수에 할당해보는 것입니다.
const x = if(x){}; //에러
const x = x ? true : false 삼항연산자
삼항연산자는 if의 대체제로 많이 사용되는데 단순히 한줄짜리 가독성이 좋아서 사용하는것이 아니라 평가되었을 때 값인 표현식이기때문에 값이 들어갈 수 있는 모든 위치에 사용될 수 있다는점입니다. 하여 JSX 내부에서도 당연히 사용이 가능합니다^^
JSX 내부에서 삼항연산자를 사용하는 이유가 위와 같습니다.
const hi = "안녕하세요";
function App(){
return (
<div>
<p>{hi ? hi : "글자가 없습니다"}</p>
</div>
)
}undefined를 렌더링하지 않기
컴포넌트에서 undefined만 반환하면 에러를 발생시킬 수 있습니다. ( 테스트 했을땐 괜찮았는데 하지말라면 하지말아야겠죠?ㅎㅎ )
아래처럼 처리하면 됩니다.
const hi = undefined;
function App(){
return (
<div>
<p>{hi === undefined ? "값이 undefined 입니다" : 하고싶은거 }</p>
</div>
)
}JSX에서 주석
{/* 이렇게 작성합니다. */}