2. JSX
JS의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환된다.
👀바벨?
**최신 문법으로 작성된 JS코드들을 ES6문법의 하위버전으로 변환해 주는 트랜스파일러이다. 구버전 웹 브라우저와
호환하기 위해 사용되며 JSX문법도 정식 자바스크립트 문법이 아니므로 이 과정을 거쳐야 한다.👀번들링?
**리액트에는 특정 파일을 불러오는 구문인 'import'가 사용된다. 헌데 이렇게 모듈을 불러와서 사용하는 것은
원래 브라우저에 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인
Node.js에서 지원하는 기능이다. 그리고 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러온다.
이러한 기능을 브라우저에서도 사용하기 위해 '번들러'를 사용한다. 번들은 묶는다는 뜻으로, 파일을 묶듯이 연결하는
것을 의미한다. 번들러 도구를 사용하면 import(or require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서
하나의 파일을 생성해준다. 반대로 최적화 과정에서 여러 개의 파일로 분리될 수도 있다.2-1. JSX의 장점
✔JSX문법
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}✔위 JSX문법이 변환되면🤷♀️?
function App() {
return React.createElement("div", null, "Hello", React.create("b", null, "react"));
}위와 같은 코드를 매번 작성하면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다. 또한 우리가 알고 있는 div나 span같은 HTML 태그를 사용할 수 있고, 컴포넌트도 JSX 안에서 작성할 수 있다. 그리고 App 컴포넌트를 HTML 태그 쓰듯이 작성한다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);👀ReactDOM.render?
**컴포넌트를 페이지에 렌더링하는 역할을 한다. 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로
작성하고, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부요소를 설정한다.2-2. JSX 문법
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.
🔴잘못된 예시
function App() {
return (
<h1>잘못된</h1>
<h2>코드</h2>
)
}🟢올바른 예시
function App() {
return (
<div>
<h1>올바른</h1>
<h2>코드</h2>
</div>
)
}잘못된 예시로 작성할 경우 오류가 발생한다. 이렇게 해야하는 이유는 VirtualDOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 그리고 여기서 div요소를 사요하고 싶지 않을 때에는 리액트 v16이상 부터 도입된 Fragment라는 기능을 사용하면 된다. 이 때 import구문에서 react 모듈에 들어 있는 Fragment컴포넌트를 추가로 불러와야한다.
🟢Fragment1
function App() {
return (
<Fragment>
<h1>올바른</h1>
<h2>코드</h2>
</Fragment>
)
}🟢Fragment2
function App() {
return (
<>
<h1>올바른</h1>
<h2>코드</h2>
</>
)
}그리고 JSX 안에서는 JS 표현식 작성하기가 가능하고, JSX 밖에서 if 문과 연산자를 사용하여 사전에 값을 설정할 수 있고, 조건부 렌더링을 할 수도 있다.
1. JS표현식 사용하기
function App() {
const name = '리액트';
return (
<>
<h1>{name}</h1>
<h2>입니다.</h2>
</>
)
}2. 조건부 연산자
function App() {
const name = '리액트';
return (
<div>
{name === '리액트' ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
}3. AND 연산자(&&)를 사용한 조건부 렌더링
아래 코드의 경우 조건에 따라 아무것도 렌더링 하지 않아야 할 경우 간결하게 사용코자 쓴다.
function App() {
const name = '리액투';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}🧐그 밖의 이것저것!
1.class 대신 className
그리고 JSX에서는 class가 아닌 className으로 클래스명을 설정한다. 물론 class값을 설정해도 스타일이 적용되기는 하지만 개발자도구 console탭에 Warning문구가 뜰것이다.
function App() {
return <div className="react">리액트</div>
}2.꼭 닫아야 하는 태그
HTML 코드를 작성할 때 input과 같이 닫지 않아도 되는 태그들이 있다. 하지만 JSX에서는 해당 코드를 닫지 않으면 오류가 발생한다. 하여 아래와 같이 두 가지 방법 중 하나로 닫는 태그를 사용해 준다.
1.<input></input>
2.<input />리액트를 다루는 기술을 읽고 요약한 글 입니다😊
