[11주차 Day4] 타입스크립트 기반 리액트

💡 리액트란 무엇인가

---

📌 React (웹 프레임워크)

• React.js는 자바스크립트 라이브러리의 하나임.
• 사용자 인터페이스를 만들기 위해 페이스북 (조던 워크)에서 개발
• 싱글 페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능
  • HTML 페이지는 대부분 멀티 페이지임.
  • React는 페이지를 하나만 씀. 컴포넌트라는 개념을 사용함. (렌더링 작업 거침 : 화면에 새로운 내용들을 보여주는 것)
• 2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용
• 2013년 발표. 오픈소스화 됨

📌 React 사이트

• 우리는 배우는 차원에서 스스로 할 수 있는 수준까지 되도록 끊임없이 고민해야 함
• 공식문서 및 검색에 익숙해져야 함.

📌 리액트의 동작 원리

• 초기 랜더링
  • 처음에 보여지는 화면
  • 컴포넌트 내부에서 렌더 함수를 통해 어떤 화면을 보여주게 됨
  • 렌더 함수를 실행하게 되면 그 내부의 컴포넌트들도 재귀적으로 렌더링 됨
  • 렌더링 작업이 끝나면 가지고 있는 정보들을 이용해서 실제 페이지 화면에 보여짐
• 가상 DOM 변경
  • DOM(Document Object Model)은 HTML의 구조임
  • 변경된 부분만 update 함
• 재조정
• 실제 DOM 업데이트

📌 리액트 시작하기

🔗 Create React App

npx create-react-app my-app
cd my-app
npm start

터미널에서 위와 같은 명령을 실행하면 다음과 같은 폴더와 파일들이 만들어짐

cd ..
npx create-react-app todolist--template typescript
cd todolist
npm start

위와 같은 명령을 실행하여 타입스크립트 기반 리액트 파일 생성하기

💡jsx 문법

// App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1 className = "test">Hello, 리액트!!</h1>
      <p>반갑습니다.</p>
    </div>
  );
}

export default App;

// App.css
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #282c34;
  color: white;
}

.test {
  background: blueviolet;
  color : yellow;
  font-size: 48px;
  font-weight: bold;
  padding: 20px;
}

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let name = "리액트";
  return (
    <div className="container">
      <h1 className = "test">Hello, {name}!!</h1>
      <p>반갑습니다.</p>
    </div>
  );
}

export default App;

변수 선언 후 사용시 중괄호를 사용한다. 또한. 아래와 같이 조건문도 사용 가능한데, 삼항 연산자만 가능함.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let name = "리액트";
  return (
    <div className="container">
      <h1 className = "test">Hello, 
      {
        name === '리액트' ? (<h1>YES</h1>) : null
      }!!</h1>
      <p>반갑습니다.</p>
    </div>
  );
}

export default App;

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const port = undefined;
  return (
    <div>
      {
        port || '포트를 설정하지 않았습니다.'
      }
    </div>
  );
}

export default App;

|| 연산자를 통해 undefined인 상태에서의 return 값 지정 가능

function App() {
  let name = "리액트";
  const style = { // 카멜 표기법 사용 
    backgroundColor : 'black',
    color : 'white',
    fontSize : '48px',
    fontWeight : 'bold',
    padding : '20px'
  }

  return (
    <div style= {
      {
        backgroundColor : 'black',
        color : 'white',
        fontSize : '48px',
        fontWeight : 'bold',
        padding : '20px'
      }
    }>
      <h1 style= {style}>Hello, 
      {
        name === '리액트' ? (<h1>YES</h1>) : null
      }!!</h1>
      <p>반갑습니다.</p>
    </div>
  );
}

인라인 스타일링도 가능함
<br />와 같이 태그를 닫아줘야 함.

주석문은 아래와 같이 작성함

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      {/* 주석문을 작성합니다. */}
    </div>
  );
}

export default App;