vue.js - ES6 / Vuex

Dasole Kwon·2022년 10월 24일

내가 보려고 정리하는 글

목록 보기

8/15

ES6

const&let

const - 한번 선언한값에 대해서 변경할 수 없음(상수개념)
(const는 값이 다시 할당이안됨)
let- 한번 선언한 값에 대해서 다시 선언할 수 없음
(let은 값이 다시 선언이안됨)

hoisting

var sum =5;
sum = sum + i;
function sumAllNumbers() {
}
var i = 10;

//#1 - 함수 선언식과 변수 선언을 hoisting
var sum;
function sumAllNumbers() {
//...
}
var i;
// #2 - 변수 대입 및 할당
sum = 5;
sum = sum + i;
i = 10;

Arrow Function - 화살표 함수

function 이라는 키워드를 사용하지않고 =>로 대체

var sum = function(a,b) {
	return a+b
};

var sum = (a, b) => {
	return a+b;
}

자바스크립트 모듈화 방법

자바스크립트 모듈 로더 라이브러리(AMD, Common JS) 기능을 js 언어 자체에서 지원
호출되기 전 까지는 코드 실행과 동작을 하지 않는 특징이 있음.

//libs/math.js
export function sum(x,y) {
	return x + y;	
}
export var pi = 3.141593;

//main.js
import {sum} from 'libs/math.js';
sum(1, 2);

Vuex - 상태관리 라이브러리

무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
React의 Flux패턴에서 기인함
Flux란?
데이터의 흐름이 여러 갈래로 나뉘지않고 단방향으로만 처리
MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - unidirectional data flow
such as..

action -> dispatcher -> model -> view
1. action: 화면에서 발생하는 이벤트 또는 사용자의 입력
2. dispatcher: 데이터를 변경하는 방법, 메서드
3. model: 화면에 표시할 데이터
4. view: 사용자에게 비춰지는 화면

Vuex가 왜 필요할까?

(Vuex로 해결 할 수 있는 문제)

MVC패턴에서 발생하는 구조적 오류
컴포넌트 간 데이터 전달 명시
여러개의 검포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

Vuex컨셉
-State: 컴포넌트 간에 공유하는 데이터 data()
(상태)
-View: 데이터를 표시하는 화면 template
(templete속성)
-Action: 사용자의 입력에 따라 데이터를 변경하는 methods
(특정 데이터를 변경하거나 이벤트 로직을 발생 시키는 메소드)
-actions: 비동기 처리 로직을 선언하는 메서드 async methods

Vuex구조

: 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태

getters란?

state값을 접근하는 속성이자 computed()처럼 미리 연산된 값을 접근하는 속성

mutations란?

-state의 값을 변경할 수 있는 유일한 방법이자 메서트
-뮤테이션은 commit()으로 동작시킨다
-state를 변경하기 위해 mutations를 동작시킬때 인자(payload)를 전달 할 수 있음

state는 왜 직접 변경하지 않고 mutations로 변경할까?

-여러개의 컴포넌트에서 아래와 같이 state값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는 지 추적하기가 어렵다.

method: {
	increaseCounter() {this.$store.state.counter++;}
}

-특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기가 어렵기 때문
-따라서, 뷰의 반응성을 거스르지않게 명시적으로 상태 변화를 수행. 반응성, 디버깅, 테스팅 혜택

actions란?

-비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations
-데이터요청, Promise, ES6 async와 같은 비동기 처리는 모두 actions에 선언
(context는 actions에서 뮤테이션을 접근할 수 있는 경로. mutation에게 신호를 주는 역할이라 보면 됨.)