[TIL]2022_07_07 React 공식문서[React&JSX]

React

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

JSX

JSX라 하며 JavaScript를 확장한 문법입니다

JSX의 메인은 React “엘리먼트(element)” 를 생성하는 것이다.

바닐라 JS의 경우 html과 js 파일로 나누어 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리한다.
이와 달리, React는 둘 다 포함하는 “컴포넌트”라고 부르는 연결된 유닛으로 관리한다.

JSX또한 표현식.

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

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 코드는 렌더링 되어 이렇게 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

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

JSX는 객체를 표현하기 때문에 Babel은 JSX를 React.createElement() 호출로 컴파일한다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

다음 두 예시는 동일하다.