leah

my dev_log

0%

3차 세미나_24/04/21

Posted on Edited on In ,

들어가기에 앞서

Framework

개발에 필요한 뼈대를 제공하여 사용자가 덧붙이는 형식으로 코드를 완성시킨다.

e.g. 집


Library

개발에 필요한 도구들을 제공하여 사용자가 필요할 때 리소스를 가져와 사용한다.

e.g. 가구


👉 둘 다 공통의 개발환경을 제공 하여 개발 시간과 리소스 비용을 줄여주는 도구


React 이해하기


React는…

  • 지속해서 데이터가 변화하는 대규모 애플리케이션 을 구축하기 좋다.
  • 점유율이 가장 높다.

JQuery

$ 이용

  1. 자바스크립트 라이브러리
  2. DOM 조작을 쉽고 효율적으로
  3. 브라우저마다 자바스크립트 호환성이 달랐던 문제를 해결

👉 ES6로 인해 사용률 ↓


SPA (Single Page Application) 의 등장

  1. 웹의 규모가 커지면서 단순한 웹 페이지가 아닌, 웹 어플리케이션 으로 발전
  2. 엄청난 JS 파일을 유지, 보수하기 위해 웹 라이브러리/ 프레임워크의 중요성 대두
  • 웹 페이지 전체를 재로딩하지 않고, 필요한 데이터만 동적으로 로딩하는 웹 어플리케이션
  • 기존의 MPA (Multiple Page Application) 는 페이지를 이동할 때마다 HTML, CSS, JS 파일을 전부 로딩해야 해서 속도가 상대적으로 느리다.
  • SPA는 필요한 정적 파일을 최초 1회 다운 받은 후, 필요한 데이터만 서버로부터 동적으로 전달받아 DOM을 조작한다.
장점 단점
속도가 빠르고 새로고침이 발생하지 않음 처음에 필요한 모든 정적 리소스를 다운로드하기 때문에 초기 구동 속도가 상대적으로 느림
처리과정이 효율적임 데이터가 AJAX를 통해 로드되기 때문에 검색 엔진 최적화가 어려움
👉 SSR (Server Side Rendering) 으로 해결 가능함
네트워크 동작을 모니터링 할 수 있어 디버깅 하기가 쉬움
네이티브 앱과 유사한 사용자 경험을 제공함으로써 UX를 향상시킬 수 있음

SPA Web Framework

  1. Angular
    • Framework에 가까움
    • TS 기반, 양방향 바인딩 지원
  2. React
    • Library에 가까움
    • Native로 앱 개발도 가능함 (React Native)
    • Virtual DOM, JSX
  3. Vue
    • 오픈소스 프로젝트
    • 가장 최근에 개발됨
    • Virtual DOM, 양방향 바인딩 지원, Single File Component

React 기본 문법 익히기

  • Component

    • UI 를 구성하는 개별적인 뷰 단위
      • 적절하게 분리하여 재사용성을 높이는 게 좋다. (너무 많아도/ 적어도 안 좋다!)
    • 컴포넌트를 조합하여 새로운 컴포넌트를 만들거나, 복잡한 웹 페이지를 구성할 수 있다.
    • 클래스형/ 함수형 2가지 종류의 컴포넌트가 있다.

  • Virtual DOM

    Screenshot 2021-04-24 at 15 26 29

    • DOM 요소가 변경되면, Render Tree를 만들어서 다시 화면에 보여주기까지 연산이 오래 걸린다.

    • 데이터 변경이 자주 발생하는 웹 페이지는 속도가 느려진다.

      👇 변경된 부분을 한 번에 처리하자! 🚀

    • 가상 DOM을 통해 변경된 부분만 탐지하여 실제 DOM에 적용

      • 연산을 최소화하여 성능이 개선됨

  • One-way Data Flow

    바인딩은 뷰에 보여지는 값 과 메모리 상의 값이 일치하는지 여부에 따라 방식이 달라진다.


Screenshot 2021-04-24 at 15 29 25

  • React는 기본적으로 단방향 데이터 바인딩 이다.

    • 단순하고 예측 가능한 구조

    • 뷰에서 사용자가 입력한 값이 변수에 반영 되기 위해서는 event 를 거쳐야 한다.

      e.g. onChange()

  • Two-way Data Flow

    Screenshot 2021-04-24 at 15 30 02

    • 양방향 데이터 바인딩에서는 사용자가 입력한 값이 바로 변수에 반영된다.
  • JSX
    • JavaScript를 확장하여 React의 요소를 생성하는 문법
    • HTML과 JavaScript를 결합한 형태이며, 중괄호 {} 안에 모든 JS 문법을 사용할 수 있다.

Node.js

  • npm 패키지 매니저를 사용하기 위해서 필요한 라이브러리

  • React 패키지가 포함되어 있음


CRA (Create React App)

React를 사용하기 위해 폴더를 초기화하는 과정이 필요함

1
npx create-react-app [fileName]

Functional Component

src > App.js에서 시작


  • 컴포넌트를 만들 때는 react를 import 해야 한다.

    1
    import React from "react"

  • 함수형 컴포넌트의 이름은 반드시 대문자로 시작해야 한다.

  • return 값이 실질적으로 화면에 보여지는 내용이다.

  • return 값의 최상위에는 하나의 요소만 있어야 한다.

    • <> 는 <React.Fragment> 와 동일하며, return 값의 최상위에 의미 없는 <div> 를 추가하지 않도록 사용한다.
    1
    2
    3
    <>
    ...
    </>

  • 다른 컴포넌트에서 사용하기 위해서는 export 해야 한다.

    1
    export default [name];

  • 최종적으로 App.js 에서 컴포넌트를 import하고, <> 를 통해 요소로써 사용한다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import [name] from './[file_path]';

    function App() {
    	return (
    		<>
    			<[name] />
    		</>
    	);
    }

  • 컴포넌트는 여러번 반복해서 사용할 수 있다.


JSX

  • JSX는 기본적으로 객체 이며, React 요소를 나타낸다.

  • HTML 요소 내부에 JavaScript를 사용할 때는 중괄호 {} 내부에 변수를 넣는다.

  • HTML 요소 외부에서는 JavaScript를 자유롭게 사용할 수 있다.

  • HTML attribute의 value에도 사용할 수 있다.

  • JavaScript 기반이기 때문에 attribute 이름은 CamelCase로 작성한다.

  • inline style은 두가지 방법을 사용할 수 있다.

    • 직접 지정 : 객체이기 때문에 {} 2번 사용해야 함!
    • 변수로 지정

    변수 : {}

    객체 : {{}}


Props & State

React에서 다루는 데이터의 종류


Screenshot 2021-04-29 at 23 33 02
  • Props 는 정적 데이터로서, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 방식이다.
  • Props를 넘겨줄 때는 넘겨줄 자식변수명={부모(본인) 변수명}으로, 받을 때는 parameter 에 전체를 props 로 받아오거나 구조분해할당 하여 {자식변수명} 으로 받아온다.
    • 같은 이름으로 지정해서 넘겨주는 것이 좋다.
  • State는 동적 데이터를 다루는 방식으로서, useState라는 Hook 을 통해서 사용한다.

LifeCycle

Component의 생명 주기


Screenshot 2021-04-24 at 16 23 37

  • 클래스형 컴포넌트는 생명 주기에 따라서 다음 메소드가 실행된다.
  • componentDidMount : 최초 렌더링 직후
  • componentDidUpdate : 변경된 내용 렌더링 직후
  • componentWillUnmount : DOM에서 제거될 때

👇

함수형 컴포넌트는 useEffect 를 이용하여 한 번에 처리 가능함


Hooks

함수형 컴포넌트에서 State와 LifeCycle을 다룰 수 있는 기술


  • 클래스형 컴포넌트에서는 constructor 내부에서 this.state를 통해 state를 저장하고 관리한다.
  • componentDidMount, componentDidUpdate가 컴포넌트 생명주기에 따라 호출된다.

useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useState } from "react"; // 가져오기

// count : getter
// setCount : setter
// useState() === React.useState()

const [ _var, setVar ] = useState(initVal); // 선언하기

function useState(initialValue) {
  let _var = initialValue;

  function getVar () {
    return _count;
  }

  function setVar(newValue) {
    _var = newValue;
  }
}
  • _var 은 읽기만 가능한 변수
  • setVar(newVal) 은 변수(_var)를 변경할 수 있는 함수

useEffect

1
2
3
import { useEffect } from "react";

useEffect(callBackFunc, dependencies);
  • useEffect의…
    • deps가 비어있다면 렌더링 될 때마다 초기화
    • deps가 [] 라면 최초 렌더링 시 에만 초기화
    • deps에 state의 배열이 들어가면 update; 최초 렌더링 + 해당 state가 변경되었을 때만 실행