중간 프로젝트에서 코딩 했던 방식의 문제점

• 길다.
• 코드를 읽기가 어렵다.

• HTML 은 ‘무엇을’ 하고 싶은 지가 명확히 눈에 보인다. 반면 DOM API 로 짜여진 코드를 보면 ‘어떻게’ 하고 싶은지만
  적혀 있기 때문에, ‘무엇을’ 하고 싶은 지가 한 눈에 들어오지 않는다.
  

• 템플릿이 많은 것 -> 템플릿이 한 파일에 다 모여있는 것(index.html) -> 여러 파일에 나누어서 작성하면 편했을 것 같다.

• 템플릿만 보면 무엇을 하겠다는 건지 목적이 잘 보이지 않는다. (템플릿과 JS 코드를 한꺼번에 봐야 정확히 코드가 보인다.)

• 역할과 책임(Role & Responsibility)이 하나도 분리되어 있지 않다.
• ‘페이지를 그리는 함수’에 통신, 템플릿 로딩, 템플릿과 데이터를 합치기, DOM 트리에 병합하는 코드가 전부 들어있었다.
• 페이지의 일부분이 변경되더라도, 우리의 프레임워크 아래에서는 전체를 다시 로딩할 수 밖에 없었다.

• 코딩을 하기에는 쉬었다. (데이터베이스가 변경될 때마다 페이지 전체를 매번 다시 그려주었기 때문에)

• 화면은 변하는데 URL 은 안 변한다.
• bulma 커스터마이징 하기 힘들다.

-> 이 모든 것들은 React 를 통해서 극복가능합니다

React 를 접하기 위해서 꼭 확실히 익혀두어야 하는 ES6

• Arrow Function
• Classes
• Template literals
• Let
• Const

JSX 란?

JSX 는 자바스크립트의 확장문법으로 JSX 를 리액트와 함께 사용하면
UI 가 실제로 어떻게 보일지 서술할 수 있습니다.
JSX 는 템플릿 언어처럼 보일 수 있지만 템플릿 언어는 아닙니다.
JSX 는 React 요소를 만듭니다.

왜 JSX 인가?

React 는 렌더링 로직이 다른 UI 로직과 본질적으로 결합되어 있다는 사실을 인정합니다.
즉, 이벤트의 처리 과정, 시간에 따른 상태 변화, 표시할 데이터가
어디로부터 오는지가 렌더링 로직과 결합되어 있다는 것입니다.

React 는 별도의 파일에 마크업과 로직을 넣어 기술 을 인위적으로 분리하는 대신,
둘 다 포함하는 “컴포넌트”라고 부르는 단위를 이용해 관심사를 분리 합니다.

React 를 사용하기 위해 반드시 JSX 를 사용해야 하는 것은 아닙니다만,
많은 사람들이 자바스크립트 코드 안에서 UI 작업을 할 때 시각적으로 더 편하다고 느끼고 있습니다.
또한 JSX 를 사용하면 React 가 유용한 에러 및 경고 메시지를 표시해줄 수 있습니다.

JSX 에 표현식 포함하기

JSX 안에 자바스크립트 표현식 을 중괄호로 묶어서 포함시킬 수 있습니다.
(JSX 에서 중괄호를 쓰면 중괄호 안에서 자유롭게 자바스크립트를 다룰 수 있습니다.)
예를 들어, 2 + 2, user.firstName, 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 또한 표현식이다

컴파일이 끝나면, JSX 표현식이 일반적인 자바스크립트 함수 호출이 되고,
결과적으로 자바스크립트 객체로 평가됩니다.
이 말은 if 문이나 for 문 내에서 JSX 를 사용할 수 있으며,
변수에 할당하거나 매개변수로 전달하거나 함수에서 반환할 수 있음을 의미합니다.

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

JSX 어트리뷰트 정의

어트리뷰트에서 따옴표를 사용해서 문자열 리터럴을 정의할 수 있습니다.

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

어트리뷰트에 중괄호를 사용하면, 자바스크립트 표현식을 포함시킬 수 있습니다.

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

어트리뷰트에 자바스크립트 표현식을 포함시킬 때 중괄호를 따옴표로 묶지 마세요.
따옴표 (문자열 값인 경우) 또는 중괄호 (표현식인 경우) 중 하나를 사용해야 하며,
하나의 어트리뷰트에 둘 다 사용할 수 있는 것이 아닙니다.

경고 JSX 는 HTML 보다는 자바스크립트에 가깝기 때문에,
React DOM 은 HTML 어트리뷰트 이름 대신 camelCase 어트리뷰트 이름 컨벤션을 사용합니다.
예를 들어, JSX 에서 class 는 className 이 되며, tabindex 는 tabIndex 가 됩니다.

예를 들면 이렇게

HTML vs Web API vs React JSX

JSX 자식 정의

만약 태그가 비어있다면, XML 처럼 /> 를 이용해 닫아주어야 합니다. (빈태그 문법)

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

JSX 태그는 자식을 가질 수 있습니다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 인젝션 공격 예방

사용자가 입력한 내용을 JSX 내에 포함시켜도 안전합니다.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

기본적으로, React DOM 은 렌더링 되기 전에 JSX 내에 포함된 모든 값을 이스케이프 합니다.
따라서 어플리케이션에 명시적으로 작성되지 않은 내용은 절대 삽입할 수 없습니다.
모든 것은 렌더링 되기 전에 문자열로 변환됩니다.
이렇게 하면 XSS (cross-site-scripting) 공격을 막을 수 있습니다.

JSX 객체 표현

Babel 은 JSX 를 React.createElement() 호출로 컴파일합니다.

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

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

React.createElement() 는 버그 없는 코드를 작성하는 데
도움을 주는 몇 가지 체크를 하긴 하지만, 기본적으로는 아래와 같은 객체를 생성합니다.

// Note: this structure is simplified
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world"
  }
};

이 객체를 “React 요소”라고 부릅니다.
화면에서 보고자 하는 내용에 대한 설명 내지 서술로 생각할 수 있습니다.
React 는 이 객체를 읽어들이고 이를 사용하여 DOM 을 만들어낸 뒤 최신 상태로 유지합니다.

팁 : ES6 및 JSX 코드가 모두 올바르게 표시되도록 선택한 편집기에 “Babel” 언어 설정 을 사용하는 것이 좋습니다.