상대방에게 무언가를 알려줄 때 어떻게하면 내가 전달하고 싶은 것을 나만의 언어로 쉽고 재미있게 잘 전달할 수 있을까?를 고민합니다.
설명이 미흡하지만 궁금하신 점이나 보완해야 하는 부분이 있다면 댓글 부탁드립니다.
피드백은 언제나 환영입니다! 😉
리액트를 쓰면 자연스럽게 JSX를 사용하게 되는데 이게 필수는 아니지만 HTML과 비슷하기 때문에 코드 작성과 가독성 측면에서 우리에게 친숙하고 편해서 많이 사용하고 있다.
리액트 공식 문서에서도 JSX 소개에 JSX를 리액트와 함게 사용할 것을 권장하고 있을 정도이니까
... JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.
React 공식문서 JSX 소개
그럼 여기에서 JSX가 뭔지 간단하게 알아보자
JSX
const element = <h1>Hello, world!</h1>;위의 코드를 보면 뭔가 익숙한데 어색한 느낌, HTML과 자바스크립트가 혼합 되어있다.
JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장인데 리액트 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 한다.
JSX를 사용하면 리액트 컴포넌트를 생성할 때 좋은데 React.createElement() 호출을 반복하지 않기 때문이다.
React.createElement() 호출을 반복하지 않는다는건 뭘까?
JSX를 사용하지 않는다면 React.createElement()를 사용해야한다는 말일텐데 사용하지 않으면 어떻게 코드를 작성할까?
오늘의 메인 주제다.
React.creatElement?
React.createElement(component, props, ...children) 메서드는 세 개의 인자를 취급한다.
1. 첫 번째 인자: 생성해야하는 요소 (ex div, p...)
2. 두 번째 인자: 첫 번째 인자로 넣은 요소의 모든 속성을 설정하는 객체(속성을 갖지 않으면 빈 객체나 null 전달 가능)
3. 세 번째 인자: 첫 번째 인자로 생성한 요소 사이에 있는 컨텐츠(컨텐츠가 없을 경우 생략 가능)
App.js 파일을 생성하여 코드를 작성해보자.
// App.js
import React from "react";
function App() {
return React.createElement(
"div",
{},
React.createElement("h2", {}, "안녕, 나는 div 안에 자식으로 있어")
);
}
export default App;
위의 코드에서 세 번째 인자는 <div> 태그 사이에 있는 컨텐츠이기 때문에 그 사이에 있는 컨텐츠들이 많으면 세번째 인자 이후로 컨텐츠를 더 추가할 수있다.
(아래 코드와 같이)
// App.js
import React from "react";
function App() {
return React.createElement(
"div",
{},
React.createElement("h2", {}, "안녕, 나는 div 안에 자식으로 있어"),
React.createElement(FunctionComponent, { name: "유린" })
);
}
export default App;
우리가 JSX 코드를 사용할 때 사실은 리액트가 내부에서 저렇게 코드를 변환하기 때문에 컴포넌트 파일에서 import 구문을 추가 해주는 이유가 그것이다.
import React from "react";잠깐!✋
예전에는 모든 컴포넌트 파일에서 리액트를 임포트 했어야했지만 최신 프로젝트 셋업에서는 임포트 구문 없이도 변환이 가능하게 변경되었다.
