background & philosophy

[페이스북이 React 를 만든 이유]

• 지속해서 데이터가 변화하는 대규모 애플리케이션 구축
  • 예를 들면 페이스북처럼 실시간으로 엄청난 데이터들이 쏟아지고 새로 그려지는 페이지
• 리액트는 템플릿을 쓰지 않는다
  • 리액트는 UI을 깨서 컴포넌트화 시켜서 바라본다
  • 파워풀한 자바스크립트를 사용해 UI를 추상화 시키기 때문에 유지보수가 쉬워진다
• 리액트의 업데이트는 dead simple
  • 보통의 자바스크립트 앱에서 데이터가 업데이트 되면 DOM을 다 업데이트 하지만 리액트에서는 Virtual Dom 을 이용해서 효율적으로 처리한다
  • 가상화 덕분에 DOM 의존성을 낮추고 브라우저에 의존하지않아 멀티 플랫폼 지원이 가능하게된다
• 리액트의 JSX는 중간물이 아닌 결과물을 선언적으로 써 놓는다
  • 덕분에 협업도 편해진다

[React는 빠르다]

• React는 기본적으로 느리다
  • 최적화가 필요하다

JSX

• JSX는 템플릿 언어가아닌 자바스크립트로 치환되는 언어이다

  <MyButton color="blue" shadowSize={2}>
    Click Me
  </MyButton>
  
  React.createElement(
    MyButton,
    {color: 'blue', shadowSize: 2},
    'Click Me'
  )
  
  <div className="sidebar" />
  
  React.createElement(
    'div',
    {className: 'sidebar'},
    null
  )
  
  function Test() {
   	return <div>test</div>; 
  }
  
  function hello() {
    return <div>["hi","hello",<Test/>]</div>;
  }
  
  function Test() {
    return React.createElement("div", null, "test");
  }
  
  function hello() {
    return React.createElement("div", null, "[\\"hi\\",\\"hello\\",",
                                React.createElement(Test, null), "]");
  }
  

  참고 : 온라인 바벨 컴파일러

  import React from 'react';
  // React.createElement로 변환해야하기 때문에
  // 리액트 라이브러리가 jsx 스코프 내에 import 된 상태에서만 jsx 사용이 가능하다
  import CustomButton from './CustomButton';
  
  function WarningButton() {
    // return React.createElement(CustomButton, {color: 'red'}, null);
    return <CustomButton color="red" />;
  }
  

• 사용자 정의 컴포넌트는 꼭 대문자로 시작해야한다

  • 소문자면 HTML 태그랑 구분못한다

[Class component vs Functional component]

링크 링크

Funtional Component는 props만가지고 화면 출력할때 Class Component 는 api불러오거나, 라이프 사이클 로직이 필요할떄, 근데 hooks쓰면 이제 Funtional Component 에서 다 처리 되니까 Funtional Component만 써도 문제 없다

둘의 차이는 hooks가 나온 시점에서 단순히 기능의 개수차이로 설명은 안된다