JSX(JavaScript XML)는 자바스크립트의 확장 문법입니다. 바닐라 자바스크립트, HTML, XML과 비슷하기도합니다. JSX는 이처럼 HTML 요소를 자바스크립트로 표현하고 변환하기 위해 등장한 문법입니다. 다음 자바스크립트 코드를 JSX로 바꿔쓰면 다음과 같이 바꿀 수 있습니다.
장점으로는 위에서 봤듯이 우리가 보고 이해하며, 작성하기에 JSX를 사용하는 것이 훨씬 좋다고 느낄 수 있습니다. 또한 추후에 다루겠지만 리액트 컴포넌트도 마치 HTML 태그처럼 <컴포넌트 />와 같은 식으로 사용하게 되는데 이 리액트 컴포넌트 또한 JSX에서 사용가능하다는 점 입니다.
return에 여러 개의 요소가 있다면 반드시 하나의 요소로 감싸주어야합니다. 왜냐하면 리액트의 Virtual DOM에서는 컴포넌트 변화 감지 과정에서 효율적인 감지를 위해 컴포넌트는 하나의 트리로 구성해야한다는 규칙이 있기 때문입니다. 그래서 여러개의 요소가 올 때는 트리의 루트 노드가 될 수 있는 하나의 요소를 추가해야합니다.
//오류 발생!!!
function App() {
return (
<h1>react</h1>
<h1>react</h1>
);
}
export default App;
//하나의 태그로 감싸주세요
function App() {
return (
<div>
<h1>react</h1>
<h1>react</h1>
</div>
);
}
export default App;
참고로 예시에서는 div로 넣었지만 div는 블록요소이기 때문에 자칫 원하지 않는 모양으로 결과가 나올 수 있습니다. 그럴 경우에는 리액트 v16 이상 부터 지원하는 Fragment 기능을 이용하면 됩니다 Fragment는 다음과 같이 사용할 수 있습니다.
function App() {
return (
<Fragment>
<h1>react</h1>
<h1>react</h1>
</Fragment>
);
}
export default App;
//또는 다음과 같은 단축 문법을 지원하고 있습니다.
function App() {
return (
<>
<h1>react</h1>
<h1>react</h1>
</>
);
}
export default App;
JSX는 자바스크립트 표현식도 사용할 수 있습니다. 자바스크립트 표현식을 사용하고자 하는 곳에 중괄호{}로 감싸주어 작성하면 됩니다.
function App() {
const name = 'react';
return (
<Fragment>
<h1>{name}</h1>
</Fragment>
);
}
export default App;
삼항 연산자는 꽤 많이 들어보고 사용해본적이 있을 것입니다. 갑자기 JSX에서 언급한 이유는 무엇일까요. 방금 배운 JSX의 자바스크립트 표현식에서는 if문을 사용할 수 없기 때문입니다. 그래서 JSX로 if문을 표현하고 싶다면, 표현식 {} 외부에서 if문 처리를 하거나 {} 내부에서 삼항 연산자를 이용해야합니다. 삼항 연산자의 기본적인 사용법은 다음과 같습니다.
조건? (TRUE일 때 실행할 코드): (FALSE일 때 실행할 코드)
AND 연산자&&를 이용해서 특정 조건에 따라 다른 내용을 렌더링 할 수 있습니다. 마찬가지로 if문 대신에 사용하기 좋은 문법입니다.
리액트 컴포넌트는 undefined를 렌더링 하면 오류를 발생시킵니다. 그러므로 OR연산자나(||) 다른 조건을 주어서 undefined대신 다른 결과를 지정해서 오류를 방지해야합니다.
리액트를 이용해서 DOM요소에 스타일을 넣으려고 한다면, 기존 자바스크립트나 HTML 방식처럼 문자열 형식으로 넣는 것이 아닌 객체 형태로 넣어야합니다. 이때 주의점은 font-size처럼 하이픈(-)이 들어가는 속성이름은 -를 빼고 카멜 케이스와 같은 작성법으로 작성해야합니다. (예. font-size => fontSize, background-color => backgroundColor 등)
function App() {
return (
<h1 style = {{
backgroundColor: #000,
fontSize: '5em',
}}
>
react
</h1>
);
}
export default App;
기존에 태그에 class 속성을 지정해서 묶곤 했었는데 JSX에서는 class라는 키워드 대신 className이라는 키워드로 사용합니다.
//잘못된 작성
function App() {
return (
<p class = '클래스 이름'>
react
</p>
);
}
export default App;
//올바른 작성
function App() {
return (
<p className = '클래스 이름'>
react
</p>
);
}
export default App;
HTML에서는 <input>
이나 <br>
같은 태그는 따로 </input>
처럼 닫는 태그를 작성하지 않아도 됐었습니다. 하지만 JSX로 작성할 때는 이들 태그에 대해서도 반드시 닫아주어야 합니다.
단, input태그처럼 <input> </input>
사이에 들어갈 내용이 없는 태그들은 <input />
과 같은식으로 태그를 열면서 동시에 닫을 수 있습니다. 이런 태그들을 self-closing 태그라고 합니다.
JSX에서 주석을 달 때는 자바스크립트 표현식을 이용합니다. {/* */}
와 같은 식으로 중괄호로 자바스크립트 표현식을 열어주고 자바스크립트 주석 명령을 이용해서 주석을 작성합니다. 만약 표현식을 사용하지 않고 자바스크립트 주석//, /* */
을 달게되면 주석이 그대로 드러나게 됩니다.
function App() {
return (
{/*주석은 이렇게 달아주세요.*/}
//주석을 이렇게
/*
또는 이렇게 쓰면
그대로 나타납니다.
*/
);
}
export default App;
코드 블록 상에서는 주석 처리된 것 처럼 보이지만 실제로 실행하면 주석의 내용이 그대로 나타납니다.