01. 리액트

# What? 그래서 리액트가 뭔데?

• 페이스북에서 제공하는 프론트엔드 라이브러리

 

# Why? 이걸 왜 쓰는데?

1. 유지보수 용이

• 컴포넌트 기반 개발을 하기때문에 요소들을 부품화하여 재활용하고, 재조합하기 좋음.
  -> 재활용을 잘하면
  
  1) 같은 요소 재코딩 x
  
  2) 수정할 컴포넌트만 수정(해당 컴포넌트를 쓴 페이지들을 다 고쳐줄 필요 x)

Characters라는 캐릭터 목록 모듈을 재활용(게임 계정 판매 사이트) - razbi.in-diary.com

 

2. 효율적인 리렌더링

• 데이터 변경 -> 전체 UI를 가상 DOM(페이지 view단 소스들)에 리렌더링 -> 기존 DOM과 비교해 바뀐 부분만 실제 DOM에 적용(전체 리렌더링 X, 부분 리렌더링 O)

	기존 방식(Multi Page Application)	개선된 방식(Single Page Application)
새로운 데이터 생성, 삭제, 수정	1. 데이터 생성 페이지로 이동 2. 데이터 생성 후 추가된 데이터를 보여주기 위해 페이지 새로고침 -> 전체 페이지 리렌더링(느림, 데이터 낭비) -> 목록 중간까지 스크롤 해둔 상태라면 새로고침하면서 스크롤이 다시 맨 처음으로 돌아와있음(불편)	1. 데이터 생성 페이지로 이동해도 되지만, 데이터 생성 팝업창을 띄울수도 있음 2. 데이터 생성 후 추가된 데이터를 보여주기 위해 페이지 새로고침을 할 필요 없이 기존 데이터 목록에 추가된 데이터만 삽입하여 화면에 추가된 데이터만 그려주면 됨. -> 바뀐 부분만 렌더링하므로 효율적 -> 데이터 생성 팝업창 형태로 작업했다면 팝업창만 닫아주면 되므로 보던 스크롤 유지 가능

* SPA(Single Page Application)이 더 나은 사용감을 제공해주는데 이 SPA를 만들기 위해 쓰면 가장 좋은 기술들이 React, Vue, Angular 등.

 

# How? 어떻게 쓰는데?

1. 구동환경 세팅(Node.js 설치)

• npm(node package manager)를 통한 다양한 패키지 관리 가능(우리는 이 목적으로 사용)
• 자바스크립트로 서버단 로직을 처리할 수 있게 해줌(백엔드 개발까지 가능하게 해줌. 우리는 이 목적 X)
• 설치 링크 : https://nodejs.org/ko/

Node.js

 

2. 코드 에디터 설치(Visual Studio)

• visual studio는 무료임에도 제공하는 플러그인이 많아서 프론트엔드 개발자들이 많이 쓰는 툴로 자리 잡음
• 설치 링크 : https://visualstudio.microsoft.com/ko/

Visual Studio IDE, 코드 편집기, Azure DevOps 및 App Center - Visual Studio

 

3. 리액트 프로젝트 생성하기

1) 터미널 오픈(window cmd, git bash 등 편할거 사용)

2) 리액트 프로젝트 생성 명령어 입력

npx create-react-app 프로젝트명

3) 만든 프로젝트로 이동

cd 프로젝트명

 

4) src/index.js 정리(우리가 쓸 부분만 남기고 불필요한 부분들 싹 제거)

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

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

=> App이라는 컴포넌트를 id가 root인 element를 찾아서 거기 안에다 뿌리겠다는 뜻(public/index.html 참고)

5) src/App.js 정리

function App() {
  return (
    <div className="App">
      React
    </div>
  );
}

export default App;

- src 폴더 밑에 App.js, index.js만 남기고 삭제
- public 폴더 밑에 index.html만 남기고 삭제

6) 작성한 react 코드를 실행해보기

npm start

-> npm start는 package.json scripts의 start 부분의 명령어(react-scripts start)를 실행함
-> react-scripts start가 해주는일(몰라도됨, 굳이 궁금하다면 읽어보기)

• 서버 실행
• React, JSX, es6 문법 지원
• 호환성을 위한 CSS 오토프리픽스들을 알아서 달아줌(-webkit- 이런거)
• 유닛테스트 구동환경 제공
• 라이브 디버깅(코드 잘못된 부분 실시간으로 잡아줌)
• 기타 등등

 

* 소스참고 : https://github.com/ShinHyungJune/react-course/tree/course-1-setting