TIL 26 | React 총정리

Soojeong Lee·2021년 7월 1일
React
0
post-thumbnail

React 총정리

프로젝트를 앞두고 React의 개념을 전반적으로 정리해보려 한다.

01. Why React?

Web Application의 발전

  • 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드의 유지보수가 어려워졌다.
  • 이에 따라 생산성 향상과 데이터관리, 코드 유지보수를 위해 다양한 Framework(Library)가 등장했다.
  • UI를 자동으로 업데이트 해준다는 점이 프론트에드 라이브러리, 프레임 워크를 사용하는 가장 큰 이유이다.

Frontend Framework(Libray)

  • Angular

  • Vue

  • React : 생태계가 활성화 되어있고, React Native(앱개발)의 사용으로 인해 사용자가 꾸준히 증가하기 때문에 React를 배우고자 한다.

02.What is React?

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

: React는 선언적이다.

가상 돔(Virtual Dom)

이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
즉, DOM은 트리구조로 이루어져있는데, 바뀌는 부분만 찾아서 바꿔주는 기술
➡️ 불필요한 UI 업데이트는 줄고 성능이 좋아진다.

  • Document -> HTML
  • Object
  • Model

작업 환경 설정

  1. Node.js (스마트폰이라고 가정하면)
    : 자바스크리트가 브라우저 밖(서버)에서 동작하게 하는 환경. 즉, 자바스트립트의 '탈 웹'화 (자바스크립트가 사용되는 환경이 국한되어 있지 않아졌다.)
  2. npm (앱스토어이고)
    : Node.js를 설치하면 npm(node package manager)이 자동으로 설치 된다.
    : 패키지 도구
    : 당냥한 패키지를 설치하고 버전을 관리할 수 있다.
  3. pakage (어플이다)

03. CRA(Create-React-App)

CRA - What & Why?

  • 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain)이다.
  • CRA 는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
  • CRA 를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다

CRA -Settings

  1. CRA install - npx create-react-app westagram-react
  2. CRA 기본 폴더 및 파일 구성
  • node-modules, package.json,.gitignore
    : package.json의 "dependencies"에 필요한 pakage들을 넣어두면 .gitignore에 해당 pakage가 들어 있어도 master에서 git clone을 할 때도 다른 팀원에게 적용된다 !

  • index.html, index.js, <Routes />
    : <Routes /> 라는 컴포넌트를 index.js으로 import하여 index.html에 render 되도록 구조를 설정해준다.

  • public 폴더
    ✔️ index.html
    ✔️ images
    ✔️ data

  • src 폴더
    ✔️ component 폴더
    ✔️ pages 폴더
    ✔️ styles - reset.scss, common.scss 기본 셋팅 !
    ✔️ Routes.js

04. Component

Component 정의

재사용 가능한 UI 구성 단위

Component 특징

  • 재활용하여 사용할 수 있다.
  • 코드 유지보수에 좋다.
  • 페이지의 구성을 한눈에 파악하기 좋다.
  • 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모-자식 컴포넌트)

Component 종류

  • class 형

  • 함수형

✏️ 추가로, Component의 Lifecycle
: constructor → render → componentDidMount → ( setState ) → render

05. JSX

JSX의 정의

  • 리액트에서 사용하는 자바스크립트 확장 문법
  • 나는 종종 {} 안에 작성하는 것을 잊곤 하는데 Syntax에 주의하자 !

06. React Router

SPA

  • SPA (Single Page Application) : 페이지가 1개로 구성된 애플리케이션
    즉, React 프로젝트에서는 .html의 파일은 단 하나이다.

Routing

  • Routing : 다른 경로(주소)에 따라 다른 view(화면)을 보여주는 것
  • React Router : 리액트의 라우팅을 위해 가장 많이 사용되는 라이브러리
    즉, install을 해주어야 사용가능하다. (third-party libary)

React Router

  • Create React App(CRA)에 특별히 routing을 위한 로직이 없다. (UI를 담당하기 때문에)

  • npm install react-router-dom --save 후 사용하면 된다.

  • Routing을 위해 필요한 요소

    ✔️ <Router /> : 라우팅 기능을 위해서 감싸주는 컴포넌트

    ✔️ <Switch /> : 경로에 따라 어떤 컴포넌트가 보여지게 되는지 지정

    ✔️ <Route /> : 실제 경로와 실제 보여주는 컴포넌트 지정

    ➡️ 이를 사용하기 위해서는 Routes.js에
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';를 해주어야 사용가능하다.

Route 이동하기

  1. <Link> 컴포넌트 사용하는 방법 - <Link to="/signup">회원가입</Link>
  2. withRouterHOC 로 구현하는 방법 - this.props.history.push('/signup')

  • <Link> vs. withRouterHOC
    ➡️ <Link>: 클릭 시 바로 이동하는 로직 구현 시에 사용한다.
    ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

    ➡️ withRouterHOC : 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용한다.
    ex. 로그인 버튼 클릭 시
    - Backend API로 데이터(User Info) 전송
    - User Data 인증 / 인가
    - response message
    - Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
    - Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

    withRouterHOC code - example

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

goToMain = () => {
    if(response.message === "valid user"){
      this.props.history.push('/main');
   } else {
     alert("회원가입을 해주세요")
     this.props.history.push('/signup');
   }
 }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);
  • <Link> vs. <a>
    ➡️ <a> - 외부 사이트로 이동하는 경우 : 완전히 전환될 때 사용함. 내부이동 때는 사용하지 않지만, 완전히 외부로 이동할 때 사용함.
    ➡️ <Link> - 프로젝트 내에서 페이지 전환하는 경우 : a로 컴파일 되지 만 새롭게 파일을 받아오는 요청을 하지 않음. 경로만 바꿔줌. 필요 없는 부분 렌더링 하지 않음.

07. State & Props

: 이 부분은 작성한 코드를 리팩토링, 리뷰하면서 채워나가기 🙌🏻

State

  • 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
  • state: 화면에 보여줄 컴포넌트의 정보(상태를 가지고 있는 객체)

Props

  • 컴포넌트의 속성값 (Property)
  • 부모 컴포넌트로부터 전달 받은 데이터를 가지고 있는 객체

08. Mock Data 활용법

mock data

  • 실제 API(Application Programming Interface)에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터

mock data 사용 이유

  • 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 확인
  • Backend와의 소통 : 주고 받는 데이터가 어떤 형태인지 key-value 값 조정을 위해

mock data 관리 방법

  • data.js
  • public 폴더 > data 폴더 > data.json (fetch의 형태로 받아오기 때문에 추후 통신을 위해서라면 이 방법을 사용하는게 더 낫다고 생각한다.🔑)
profile
Soojeong Lee
🍼 newbie frontend developer
이전 포스트

TIL 25 | 로그인 & 회원가입 - Fetch 함수

다음 포스트

TIL 27 | Git의 개념과 동작 원리

0개의 댓글