1. JSX의 정의
const element = <h1>Hello, world!</h1>;
// String 도 아니고 HTML 도 아닌 애매하게 생겼다
JSX는 Javascript XML의 약어이다. 공식적인 javascript문법이 아닌 확장 문법이지만 javascript의 모든 기능이 함께 제공된다. JSX의 사용이 필수적이진 않지만 React 공식문서에서는 사용을 권장하고 있다. 그 이유로는 개발자가 javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 편하게 해 주며 오류 발생 시 React가 도움이 되는 에러나 오류 메시지를 표시해줄 수 있기 때문이다.
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
//////////////////(Babel Compiler)///////////////////////////
function App() {
return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}
// 위 두 코드는 react 상에서 동일하게 작동한다.
// 상단의 코드가 컴파일러를 거치면 하단의 코드로 브라우저에서 작동한다.
JSX로 작성된 코드는 브라우저에서 실행되기 전 바벨(Babel)이라는 컴파일러를 거치게 된다. 바벨은 타입스크립트나 JSX 같은 새로운 문법이나 언어들을 모든 브라우저에서 작동하도록 호환성을 위해 사용되는 컴파일러이다.
개발자 입장에서 하단의 코드처럼 일일이 createElement() 를 불러내며 코드를 작성하는 것은 시각적으로 불편하고 효율적이지 못하다. 따라서 상단의 코드처럼 JSX사용을 권장한다.
2. JSX의 특징
- ' {} ' 에 표현식을 넣어 사용한다. 중괄호에는 유효한 모든 javascript 표현식과 react 변수가 들어갈 수 있다.
- 큰 단위의 HTML 블록이 들어온다면 ' () ' 안에 작성해야한다.
- react 요소를 생성한다.
- XML 규칙을 따른다.
- 컴파일 후, JSX 식은 일반적인 javascript 함수 호출이 된다.
- HTML 속성의 이름은 camelCase로 지어야 한다. 예를 들어 font-size는 fontSize로 사용해야 한다. 특히 class는 className으로 사용함에 유의하자.
- input을 사용하거나 img 태그 등 HTML에서 닫지 않아도 동작하는 태그들도 JSX로 작성 시 반드시 닫아줘야 한다.
- 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다. 소문자의 경우 <div>, <span> 등 내장 컴포넌트를 뜻하기 때문에 문자열 형태로 React.createElement에 전달되어 오류가 발생할 수 있다.
// 추가적인 설명이 필요한 특징은 컴포넌트가 여러개 있다면 반드시 부모요소로 감싸야 한다는 점이다.
function Welcome(props) { //대문자로 시작
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div> // div, header, content 등 부모요소로 감싸줘야 한다.
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
3. 예시
function Name(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {Name(user)}!
</h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
추가적으로 JSX의 장점을 더 알고 싶다면 https://www.geeksforgeeks.org/jsx-full-form/
react 공식문서 https://reactjs.org/docs/getting-started.html 한글 번역이 잘돼 있지만 이해를 돕기 위해 원문도 같이 보는 것을 추천한다.
'Programing > React' 카테고리의 다른 글
[React] 소셜웹페이지 - 서버 통신 & 로그인 (0) | 2022.08.27 |
---|---|
[React] 댓글 입력 오류 (0) | 2022.08.19 |
[React] 소셜웹페이지 - 자바스크립트 ➡️ 리액트 변환 (0) | 2022.08.17 |
[React] css 모듈과 proptype (0) | 2022.07.29 |
[React] 시작하기 (0) | 2022.07.05 |