웹 풀사이클 데브코스 TIL 50일차

리액트

리액트는 싱글페이지 어플리케이션 기반이다. 따라서 화면 이동을 할때 더 부드럽게 동작한다.

리액트의 동작원리

리액트는 더블 버퍼링 기법을 사용한다. 더블 버퍼링은 실시간으로 화면에 렌더링을 하면 그래픽 부하가 심해지니 똑같은 데이터를 메모리에 복사해서 연산을 한후 카피하는 방식으로 동작한다.

• 초기 랜더링: 컴포넌트를 생성하고 가상 DOM을 생성
• 가상 DOM 변경
• 재조정
• 실제 DOM 업데이트

가상 DOM(메모리 영역)에 상태 변경된 부분을 이전 상태와 비교해서 확인하고 재 렌더링 한다.

리액트 프로젝트 생성

리액트 공식 홈페이지에서 리액트를 어떻게 사용하는지에 대해 알려주고 있다. 우리는 Create React App 이라는 방식으로 프로젝트를 만들어 볼 것이다.
https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html

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

터미널에 이 명령어를 순서대로 쳐준다.
우리는 타입스크립트 코드를 위해 추가 옵션을 달아서 설치해준다.

npx create-react-app myblog --template typescript 

일정관리 앱 프로젝트

나의 블로그를 하나 만들고 기본적인 글 추가와 삭제, 좋아요 추가 등의 CRUD 기능을 위주로 프로젝트를 만들 것이다.

JSX

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

리액트 구조

리액트는 싱글페이지 어플리케이션이다. 한 개의 웹페이지 내용을 바꿔가면서 동작한다는 뜻이다. public/index.html 파일 하나 위에서 동작한다. index.html 에는 id가 root 인 div 가 존재한다

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root라는 엘리먼트를 가져와서 변수에 담고 렌더링을 한다. App 이라는 함수를 App.tsx 에서 가져온다. 이렇게 렌더링된 값들은 다시 index.html에 반영된다.

App.tsx

function App() {
    //자바스크립트 코드
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React</h1>
        <p>만나서 반갑습니다.</p>
      </header>
    </div>
  );
}

return은 화면을 리턴하겠다는 뜻이다. 리턴 안에서는 HTML의 문법 기반으로 표현하면 된다. return 이전에는 필요한 자바스크립트 코드를 넣어준다.

JSX 문법

return 문에 포함될 내용은 반드시 최상위 부모가 있어야 한다.

  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React</h1>
        <p>만나서 반갑습니다.</p>
      </header>
    </div>
  );

이 코드에서는 App 클래스가 최상위 부모이다. 최상위 부모가 없으면 오류가 발생한다. div가 아니어도 p 태그로 변경해도 가능하지만 div 태그를 일반적으로 사용한다.
이렇게 해야하는 이유는 무엇일까? vitual dom 을 상요하기 때문이다. 하나의 dom 트리에 취급해야하기 때문이다. 만약 매번 div 태그를 사용하는게 귀찮다면

  return (
    <>
        <h1>Hello React</h1>
        <p>만나서 반갑습니다.</p>
    </>
  );

이렇게 빈 태그를 사용할 수도 있다. 이를 프래그먼트라고 한다.

변수

자바스크립트의 변수를 사용할 수 있다. 이 변수를 화면에 띄워 주기 위해서는 간단한 문법을 사용하면 된다.

function App() {
  let title = '내일 할일';

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

title 이라는 변수에 값을 담고 html 안에서는 변수이름을 중괄호로 감싸준다. 변수를 이렇게 화면에 출력해주는 행위를 바인딩 한다고 한다.

클래스 선택자

jsx에서는 기존의 프로그래밍 언어의 class와의 혼동을 막기 위해 선택자 클래스는 className으로 사용한다.

 <div className="App">

style 태그

스타일 태그의 사용예시는 다음과 같다.

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

font-size 가 아닌 fontSize를 사용하고 중괄호가 두개 필요하다.

닫는 태그

기본 html에서는 닫지 않아도 되는 태그도 jsx에서는 무조건 닫아주어야한다. br 태그등이 있다.

      <br></br>

React.FC

• 리액트에서 함수형 컴포넌트를 정의할 때 사용하는 타입이다.
• Functional Component 의 약자이다.
• 함수형 컴포넌트를 정의할 때 해당 컴포넌트의 props를 명시적으로 지정할 때 사용한다. props는 함수의 매개변수와 같다고 생각하면 된다. 이 매개변수에 대한 타입을 명확하게 지정해 주어야 할 때 사용한다.

import React form 'react';

interface MyComponentProps {
    name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({name}) => {
    return <div>Hello, {name}!</div>;
};

export default MyComponent

후기

리액트에 대해서 전반적으로 학습하고 jsx 문법에 대해 공부하였다.
키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프