React와 JSX 문법

JSX문법을 구글에서 찾아보면 react의 공식 문서 부분에서 JSX소개란을 볼 수 있다.
https://ko.reactjs.org/docs/introducing-jsx.html

거기서는 아래 변수 선언부터 시작한다.

const element = <h1>Hello, world!</h1>;

이런 선언 문법은 문자열도, html도 아니다.
이를 JSX라고 하며 이건 JavaScript를 확장한 문법이다.

JSX가 그래서 정확히 뭔데요?
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

공식 문서에서는 예시를 보여준다.
dom 부분은 바로 next.js를 쓰면서 안쓰는 것 같다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

여기서 {name}부분에는 모든 자바스크립트 표현식을 넣을 수 있다. 예시로 user.firstName, formatName(user) 가 있겠다
다음 예시로 formatName(user)를 넣어보자

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

이렇게 출력된다.

JSX도 표현식입니다.
컴파일 이후에 JSX표현식은 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인신된다고 한다. 즉 JSX를 if문이나 for문에 넣어서 변수에 할당하거나, 인자로서 받아들여지거나, 함수로부터 반환될 수 있다는 것이다.

쉽게 말해서 작성은 JSX지만 자바스크립트와 똑같이 기능하고 내가 배운 바로는 100%호환에 컴파일 시 자바스크립트로 변환되서 표현되는 것으로 알고있다

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

문자열 리터럴을 정의하거나

const element = <div tabIndex="0"></div>;

자바스크립트 표현식을 삽입할 수도 있다.

const element = <img src={user.avatarUrl}></img>;

!!!여기서 공식문서는 무려 경고를 해주는데,
React는 이름을 정할 때 camelCase방식을 사용한다

파일, 변수, 함수 등 이름을 지을때 띄어쓰기 없이 짓기 위해서 따르는 관례 중 하나인데
단어 전체적으로는 소문자, 합성어의 첫글자만 대문자로 표기하는 것과 같다.
upperCamelCase
uppercamel_case <- 이건 로 구별하는 snake case다.

JSX의 자식 정의
태그가 비있다면 XML처럼 /> 이용해서 닫아주어야 한다거나

const element = <img src={user.avatarUrl} />;

태그로 자식을 포함할 수 있다는 뜻이다.

const element = <img src={user.avatarUrl} />;

이후 Babel은 아직 안해본 부분이라서 나중에 또 접해본다면 올려보겠다