React

JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장입니다. JSX는 자바스크립트 함수 호출 방식으로 컴파일되어 컴포넌트에 대한 마크업을 만들 수 있는 더 좋은 방법을 제공합니다.

<div className="sidebar" />

이 코드를 다음의 자바스크립트로 변환된다.

React.createElement(
  'div',
  {className: 'sidebar'}
)

JSX에 표현식을 포함할 수 있지만 JSX도 표현식이다.
- 따라서, 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.
- 즉, JSX를 if구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환이 가능하다.
JSX는 주입 공격을 방지한다
- 기본적으로 react DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프(특수문자임을 알려주기 위해 \을 사용하여 구분)하므로, 애플리케이션에서 명식적으로 작성되지 않은 내용은 주입되지 않는다.
- 모든 항목은 렌더링 되기 전에 문자열로 변환된다.
- 이런 특성으로 인해 XSS 공격을 방지할 수 있다.
  - XSS(corss-site-scripting) : 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점

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

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM(virtual DOM)은 리액트 엘리먼트와 일치하도록 DOM을 업데이트한다.
엘리먼트는 불변객체

Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 엘리먼트를 메모리 내에서 구현한 것입니다. 컴포넌트가 다시 렌더링될 때, virtual DOM은 업데이트할 요소의 목록을 만들기 위해 기존의 DOM 모델에서 변경되는 사항을 비교합니다. DOM 전체를 다시 렌더링할 필요 없이 실제 DOM에 필요한 최소한만 변경하여 효율성이 높다는 것이 큰 장점입니다.

JavaScript 함수와 유사하다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
-클래스 컨포넌트
- React 16.8 이전(hooks 도입 이전)에는 내부 state를 유지하는 데 필요한 컴포넌트를 생성하거나 생명주기 메소드를 활용하기 위해 클래스 기반 컴포넌트 사용
- 클래스 기반 컴포넌트는 리액트의 Component 클래스를 확장하는 ES6 클래스
- 최소한 render() 메서드를 포함해야 한다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트(hooks 도입 이전)
- state를 갖지 않으며 렌더링할 출력 결과를 반환
- 클래스 기반 컴포넌트보다 심플하기 때문에 props에만 의존하는 UI을 렌더링하는데 선호

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

만약 컴포넌트의 state를 직접 변경하려고 시도한다면, 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없다. setState() 메소드를 사용하면 리액트는 컴포넌트의 UI를 업데이트 한다.

리액트에서 collection을 렌더링할 때 엘리먼트와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 엘리먼트에 key를 추가하는 것이 중요
키는 고유한 ID를 사용, 마지막 수단으로 array index가 될 수 있다
key를 사용하지 않으면 collection에 item을 추가하거나 제거할 때 예상치 못한 동작결과 발생할 수 있다.

<ul>
  {todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  )};
</ul>

Hooks는 클래스 기반 컴포넌트의 장점(내부 state와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도
장점
- 클래스 기반 컴포넌트, lifecycle hooks, this의 필요성이 사라짐
- 공통 기능을 커스텀 hook로 만들어서 로직을 재사용하기 쉬워짐
- 컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉽고 테스트하기 쉬운 코드를 작성할 수 있다