React

React 동작 원리(더블 버퍼링)

• 초기 랜더링
• 가상 DOM 변경
• 재조정
• 실제 DOM 업데이트

React 프로젝트 생성(typescript기반)

npx create-react-app {프로젝트명} --template typescript
--template typescript는 타입스크립트 기반을 위해 추가

JSX(Javascript Syntax eXtension)

JSX는 자바스크립트의 확장 문법으로, XML과 유사한 형태로 리액트의 요소를 표현한다.
작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용해 자바스크립트 코드로 변환된다.

JSX 데이터 바인딩

function App() {
  let title: string = "내일 할일";
  return (
    <>
      <h1>{title}</h1>
      <p>만나서 반갑습니다.</p>
    </>
  );
}

1. 다음과 같이 함수안에 변수를 선언하고, 중괄호 '{ }' 안에 변수를 넣어서 바인딩 하는 방식을 사용한다.

function App() {
  let title: string = "내일 할일";
  return (
    <div className="App-header">
      <h1>{title}</h1>
      <p>만나서 반갑습니다.</p>
    </div>
  );
}

2. HTML에서 사용하던 class는 js문법의 class와 충돌되므로 className을 사용하여 class를 부여한다.

function App() {
  let title: string = "내일 할일";
  return (
    <div className="bg">
      <h1>{title}</h1>
      <p style={{ color: "red", fontSize: "30px" }}>만나서 반갑습니다.</p>
    </div>
  );
}

3. style 값을 주기 위해서는 {{}}이중 중괄호명을 사용해야 한다.
   기존 -를 사용하던 속성들은 카멜케이스로 변경해서 사용해야한다. (-가 연산자로 인식될 수 있기 때문이다)

4. 모든 태그들은 반드시 닫혀있어야 한다.

합수형 컴포넌트의 타입 React.FC

• 리액트에서 함수형 컴포넌트를 정의할 때 사용하는 타입이다.
• Functional Component의 약자
• 함수형 컴포넌트를 정의할 때 해당 컴포넌트의 props(properties)를 명시적으로 지정할 때 사용한다.