210317 개발일지(100일차) - React란 무엇인가? + JSX에 대해

리액트란

React는 Component단위로 이루어진 UI를 만들 수 있는 라이브러리다.

각각 독립적이고, 재사용이 가능한 컴포넌트를 조합해서 만든 것이다. (트리 구조로 이뤄짐)

리액트는 데이터가 변경될 때마다 어플레케이션 전체를 다시 렌더링 한다.

가상의 DOM Tree를 React에서 저장하고 있어서 속도를 보장해준다.

JSX

JSX는 Javascript를 확장한 문법이라고 할 수 있다. JSX는 React 엘리먼트(Element)를 생성한다.
React는 JSX를 사용하지 않아도 되는데, UI관련 작업을 할 때 시각적으로 더 도움이 된다고 한다.
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 된다.

아래처럼 .jsx 코드를 작성하면, 아래와 같은 화면이 브라우저 창에 나타난다.

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

const user = {
  firstName: '고고고',
  lastName: '재재재'
};

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

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