컴과생의 끄적끄적

[처음 만난 리덕스] 7. Container

ypearl — Sun, 31 Dec 2023 02:28:34 +0900

Container

Redux의 공식 개념은 아니다.

Redux를 React에 연동했을 때 사용하는 개념

Container Component의 준말로,

Redux의 일부 state와 dispatcher를 포함하는 리액트 컴포넌트.

(= Redux와 연결되어 있는 리액트 컴포넌트)

react-redux

React와 Redux를 연동하기 위해 사용하는 공식 바인딩 라이브러리

- Binding Library (= Binding)

: 어떤 라이브러리를 특정 환경에서 사용하기 위해서,

그 환경과 라이브러리를 중간에서 묶어주는 역할을 하는 라이브러리

react-redux의 주요 API

- Provider

: 하위 컴포넌트들이 Redux Store에 접근할 수 있게 해줌

- mapStateToProps()

: Redux state를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수

주의: 컴포넌트에서 꼭 필요한 state만 추출해서 전달해야 함!
(필요없는 재렌더링은 성능에 지장을 줄 수 있기 때문)

- mapDispatchToProps()

: Redux dispatch를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수

함수가 리턴하는 객체가 리액트 컴포넌트의 props로 전달됨!

- connect()

:Redux와 React 컴포넌트를 연결시켜 주는 역할

*그냥 호출해서 사용하면 된다.

Wrapper Function을 리턴 (어떤 리액트 컴포넌트든지 Container로 만들어 주는 함수)

주의: connect() 된 컴포넌트를 사용해야 함!

Redux와 React 연동하기

Redux Store 생성
Redux Action Type 정의 및 Action Creator와 Reducer 구현
React Component 구현
Container 만들기 (*실제 Redux와 React를 연결하는 과정)
1. mapStateToProps()
2. mapDispatchToProps()
3. connect()
Provider를 사용해 store 전달하기 (Higher Order Component, HOC)
Container Component 렌더링

[처음 만난 리덕스] 6. Redux와 UI

ypearl — Mon, 25 Dec 2023 05:23:38 +0900

Redux와 UI 관계

= 관계가 없다!

Redux는 독자적인 자바스크립트 라이브러리로,

사용자에게 보이는 UI가 없이도 사용 가능하다.

(따라서, 본래 React외에 NGULAR나 Vue와도 함꼐 사용가능하나

애초에 React와 궁합이 잘 맞도록 설계되었기에 React와 함께 사용하는 경우가 대부분이다.)

Redux와 UI 연동

1. Redux Store 생성

2. Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가

3. UI 업데이트 과정

1) 현재 Redux Store의 데이터(state)를 가져옴

2) 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출

3) 추출한 데이터를 사용해서 UI 업데이트

4. 필요한 경우 초기 UI 렌더링

5. UI 입력이 발생한 경우 Action을 Dispatch해서 UI 업데이트

Redux와 UI 연동

→ Redux는 UI의 종류와 상관없이 동일한 방식으로 작동!

[실습] 신호등 애플리케이션 만들기

<!DOCTYPE html>

<head>

</head>

<body>

<div

id="red-light"

style="width: 56px; height: 56px; border-radius: 100%"

></div>

<div

id="orange-light"

style="width: 56px; height: 56px; border-radius: 100%"

></div>

<div

id="green-light"

style="width: 56px; height: 56px; border-radius: 100%"

></div>

</div>

</div>

// Action Types

var ACTION_TYPE_TURN_ON_RED = "TURN_ON_RED";

var ACTION_TYPE_TURN_ON_ORANGE = "TURN_ON_ORANGE";

var ACTION_TYPE_TURN_ON_GREEN = "TURN_ON_GREEN";

// Action Creators

function turnOnRedActionCreator(text){

return {

type:ACTION_TYPE_TURN_ON_RED,

};

}

function turnOnOrangeActionCreator(text){

return {

type:ACTION_TYPE_TURN_ON_ORANGE,

};

}

function turnOnGreenActionCreator(text){

return {

type:ACTION_TYPE_TURN_ON_GREEN,

};

}

var initialState = {

red: false,

orange: false,

green: false,

};

// Reducer

function lightsReducer(state = initialState, action){

switch (action.type){

case ACTION_TYPE_TURN_ON_RED:

return {

...initialState,

red: true,

};

case ACTION_TYPE_TURN_ON_ORANGE:

return {

...initialState,

orange: true,

};

case ACTION_TYPE_TURN_ON_GREEN:

return {

...initialState,

green: true,

};

default:

return state;

}

// Create Redux Store

var store = Redux.createStore(lightsReducer);

var redLightElem = document.getElementById("red-light");

var orangeLightElem = document.getElementById("orange-light");

var greenLightElem = document.getElementById("green-light");

// UI update function

function render() {

if (store.getState().red){

redLightElem.style.backgroundColor="red";

}else {

redLightElem.style.backgroundColor="gray";

}

if (store.getState().orange){

orangeLightElem.style.backgroundColor="orange";

}else {

orangeLightElem.style.backgroundColor="gray";

}

if (store.getState().green){

greenLightElem.style.backgroundColor="green";

}else {

greenLightElem.style.backgroundColor="gray";

}

// Initial rendering

render();

// UI update subscribe Redux Store

store.subscribe(render);

// UI event(click) listeners for dispatching Redux Action

document

.getElementById("turn-on-red-button")

.addEventListener("click", function(){

store.dispatch(turnOnRedActionCreator());

});

document

.getElementById("turn-on-orange-button")

.addEventListener("click", function(){

store.dispatch(turnOnOrangeActionCreator());

});

document

.getElementById("turn-on-green-button")

.addEventListener("click", function(){

store.dispatch(turnOnGreenActionCreator());

});

</script>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[처음 만난 리덕스] 5. Reducer

ypearl — Mon, 25 Dec 2023 04:58:08 +0900

Reducer

: Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수

= 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정

[역할] Redux State에 변화를 주는 역할

state와 action을 받아 "새로운 state"를 만들어 리턴하는 Reducer

function appReducer(state = initialState, action) {
	switch(action.type) {
    	case 'PUSH_ITEM':
			return [...state, action.item];
        case 'POP_ITEM':
        	const newState = [...state]; // (state 변화가 아닌) 새로운 state를 생성!
            newState.pop();
            return newState;
        default:
        	return state;
   }
}

Rules of Reducer

Only calculate the new state value based on the state and action arguments.
: 새로운 state는 파라미터로 받은 현재 state와 Action 객체를 기반으로 생성해야 한다.
(외부의 다른 값을 참조해서 state 변화주는 것 X)
→ pure function을 위한 규칙
Not allowed to modify the existing state.
Instead, make immutable updates.
: 현재 state를 조작할 수 없으며, 새로운 state를 만들어 immutalbe 업데이트를 해야 한다.
Not do any asynchronous logic or other "side effects".
: 비동기 로직이나 사이드 이펙트는 허용하지 않는다.
예) Reducer 내에서 서버와 통신해서 데이터 받아오는 등의 동작(X)
*side effect: reducer 외부에서 보여질 수 있는 상태의 변경 또는 동작
(콘솔 로그 출력, 파일 저장 등 순수함수의 return 값과 무관한 것들)

=> Predictable (예측 가능) 위해!

Immutable Update (불변적 업데이트)

: 현재 state를 변경하지 않고 새로운 state를 만들어 업데이트하는 방식

좌: X / 우: O

- Redux Toolkit을 사용하면 복잡한 객체에 대해서도 손쉽게 immutable update를 처리할 수 있다.

combineReducers()

: 여러 개의 리듀서들을 하나로 모으는 역할

=> Root Reducer

: 이렇게 모은 리듀서들이 하나로 합쳐진 것

import { combineReducers } from 'redux';

import postReducer from './reducers/postReducer';
import commentReducer from './reducers/commentReducer';

const rootReducer = combineReducers({  // postReducer와 commentReducer를 합침
	post: postReducer,  // 객체 형태: 객체의 키 = RootState의 키
    comment: commentReducer
});

export default rootReducer;

[실습] TODO 애플리케이션에 MEMO 기능 추가하기

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<button id="logging-state">State Logging</button>

</div>

<div>

</div>

// 액션 타입을 별도로 선언해 코드의 반복을 줄임

// TODO 관련 ACTION Type

var ACTION_TYPE_ADD_TODO = "ADD_TODO";

var ACTION_TYPE_REMOVE_TODO = "REMOVE_TODO";

var ACTION_TYPE_REMOVE_ALL = "REMOVE_ALL";

// MEMO 관련 ACTION Type

var ACTION_TYPE_ADD_MEMO = "ADD_MEMO";

var ACTION_TYPE_REMOVE_MEMO = "REMOVE_MEMO";

var todoInitialState = []; // 리턴값이 없으면 에러 발생 -> 초기값 무조건 필요!

var memoInitialState = [];

function todoReducer(state = todoInitialState, action){

switch(action.type){

case ACTION_TYPE_ADD_TODO:

return state.concat(action.text);

case ACTION_TYPE_REMOVE_TODO:

return state.slice(0, -1); // slice 함수를 사용해 배열의 마지막 아이템 하나를 삭제

case ACTION_TYPE_REMOVE_ALL:

return [];

default:

return state;

}

function memoReducer(state = memoInitialState, action){

switch(action.type){

case ACTION_TYPE_ADD_MEMO:

return state.concat(action.text);

case ACTION_TYPE_REMOVE_MEMO:

return state.slice(0, -1);

default:

return state;

}

function loggerMiddleware({getState}){ // 구조분해할당: 파라미터 중 getState만 꺼내서 사용

return (next) => (action) => {

console.log("dispatch 예정 action", action);

// Middleware chain에 있는 다음 dispatch 함수를 호출

const returnValue = next(action);

console.log("dispatch 이후 state", getState());

return returnValue;

};

}

var rootReducer = Redux.combineReducers({

todo: todoReducer,

memo: memoReducer,

});

var store = Redux.createStore(

rootReducer,

Redux.applyMiddleware(loggerMiddleware)

);

var todoListElem = document.getElementById("todo-list");

var memoListElem = document.getElementById("memo-list");

var inputElem = document.getElementById("input-text");

var inputMemoElem = document.getElementById("input-memo-text");

function render() {

// 이전 TODO 목록 초기화 (아이템이 중복으로 쌓이지 않기 위함)

todoListElem.innerHTML="";

memoListElem.innerHTML="";

// TODO 목록 렌더링

store.getState().todo.forEach((todo) => { // 각 state 접근시, root reducer 만들 때 사용한 키 값 사용

const todoListItemElem = document.createElement("li");

todoListItemElem.textContent=todo;

todoListElem.appendChild(todoListItemElem);

});

// MEMO 목록 렌더링

store.getState().memo.forEach((todo) => {

const memoListItemElem = document.createElement("li");

memoListItemElem.textContent=todo;

memoListElem.appendChild(memoListItemElem);

});

}

render();

store.subscribe(render); // Redux Store의 state가 변경될 때마다 render 함수 호출

function addTodoActionCreator(text){

return {

type: ACTION_TYPE_ADD_TODO,

text: text,

};

}

function removeTodoActionCreator(){

return {

type: ACTION_TYPE_REMOVE_TODO,

};

}

function removeAllActionCreator(){

return {

type: ACTION_TYPE_REMOVE_ALL,

};

}

function addMemoActionCreator(text){

return {

type: ACTION_TYPE_ADD_MEMO,

text: text,

};

}

function removeMemoActionCreator(){

return {

type: ACTION_TYPE_REMOVE_MEMO,

};

}

document

.getElementById("add-button")

.addEventListener("click", function(){

// Action을 실제로 dispatch

store.dispatch(addTodoActionCreator(inputElem.value));

// Input 초기화

inputElem.value = "";

});

document

.getElementById("remove-button")

.addEventListener("click", function(){

store.dispatch(removeTodoActionCreator());

});

document

.getElementById("remove-all-button")

.addEventListener("click", function(){

store.dispatch(removeAllActionCreator());

});

document

.getElementById("logging-state")

.addEventListener("click", function(){

console.log("현재 state", store.getState());

});

document

.getElementById("add-memo-button")

.addEventListener("click", function(){

store.dispatch(addMemoActionCreator(inputMemoElem.value));

inputElem.value = "";

});

document

.getElementById("remove-memo-button")

.addEventListener("click", function(){

store.dispatch(removeMemoActionCreator());

});

</script>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[처음 만난 리덕스] 4. Action

ypearl — Mon, 25 Dec 2023 04:14:56 +0900

Action

: Redux Store에 저장된 데이터(State)에 변화를 주기 위한 행동

*Redux Action은 JavaScript 객체 형태로 존재

(일반 JS 객체와 다른 점은, type이라는 필드를 무조건 포함한다는 점!

type - Redux Action의 type을 의미.)

{
    type: 'ADD_TODO',  // type: Action의 이름(개발자가 정의)
    text: 'Redux 공부하기'  // (payload): Action을 처리하는 데 필요한 부가 데이터
}

Action Creator

: Action 객체를 생성하는 역할을 하는 JavaScript 함수

function addTodo(text) {
	return { // 여기서 리턴하는 객체가 바로 Redux Action 객체
    	type: 'ADD_TODO',
        text: text
    };
}

Action Creator와 Action의 관계

[실습] TODO 애플리케이션에 다양한 Action 정의하기 / Creator 만들기

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<button id="logging-state">State Logging</button>

</div>

// 액션 타입을 별도로 선언해 코드의 반복을 줄임

var ACTION_TYPE_ADD_TODO = "ADD_TODO";

var ACTION_TYPE_REMOVE_TODO = "REMOVE_TODO";

var ACTION_TYPE_REMOVE_ALL = "REMOVE_ALL";

function todoReducer(state, action){

switch(action.type){

case ACTION_TYPE_ADD_TODO:

return state.concat(action.text);

case ACTION_TYPE_REMOVE_TODO:

return state.slice(0, -1); // slice 함수를 사용해 배열의 마지막 아이템 하나를 삭제

case ACTION_TYPE_REMOVE_ALL:

return [];

default:

return state;

}

function loggerMiddleware({getState}){ // 구조분해할당: 파라미터 중 getState만 꺼내서 사용

return (next) => (action) => {

console.log("dispatch 예정 action", action);

// Middleware chain에 있는 다음 dispatch 함수를 호출

const returnValue = next(action);

console.log("dispatch 이후 state", getState());

return returnValue;

};

}

var store = Redux.createStore(

todoReducer,

["처음 만난 리덕스 공부하기"],

Redux.applyMiddleware(loggerMiddleware)

);

var todoListElem = document.getElementById("todo-list");

var inputElem = document.getElementById("input-text");

function render() {

// 이전 TODO 목록 초기화 (아이템이 중복으로 쌓이지 않기 위함)

todoListElem.innerHTML="";

// TODO 목록 렌더링

store.getState().forEach((todo) => { // getState 함수: store에서 현재 state 가져옴

// 반복문 사용해 아이템의 개수만큼 li 태그 만들어 ul 태그에 append

const todoListItemElem = document.createElement("li");

todoListItemElem.textContent=todo;

todoListElem.appendChild(todoListItemElem);

});

}

render();

store.subscribe(render); // Redux Store의 state가 변경될 때마다 render 함수 호출

function addTodoActionCreator(text){

return {

type: ACTION_TYPE_ADD_TODO,

text: text,

};

}

function removeTodoActionCreator(){

return {

type: ACTION_TYPE_REMOVE_TODO,

};

}

function removeAllActionCreator(text){

return {

type: ACTION_TYPE_REMOVE_ALL,

};

}

document

.getElementById("add-button")

.addEventListener("click", function(){

// Action을 실제로 dispatch

store.dispatch(addTodoActionCreator(inputElem.value));

// Input 초기화

inputElem.value = "";

});

document

.getElementById("remove-button")

.addEventListener("click", function(){

store.dispatch(removeTodoActionCreator());

});

document

.getElementById("remove-all-button")

.addEventListener("click", function(){

store.dispatch(removeAllActionCreator());

});

document

.getElementById("logging-state")

.addEventListener("click", function(){

console.log("현재 state", store.getState());

});

</script>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[처음 만난 리덕스] 3. Store

ypearl — Mon, 25 Dec 2023 02:55:18 +0900

Store

: Redux의 데이터들을 저장하기 위한 저장소

실제 저장이 아닌, State management의 의미

→ Redux Store의 데이터들을 저장장치에 저장되지 않음!

- Redux Store는 데이터를 어떻게 관리할까?

: JavaScript 변수를 통해 데이터를 관리

* 웹브라우저 새로고침, 컴퓨터 재부팅 시에

Redux Store의 데이터는 모두 날아감!

- 트리 형태로 저장되는 Redux Store의 데이터들

Dispatcher

: Action을 발송하는 역할 (수신자는 Redux)

- Store의 dispatch 함수를 통해 디스패처 역할을 함

Store 관련 함수

createStore() : Redux Store를 생성하는 역할을 하는 함수

const store = creatStore(todoReducer, ['처음 만난 리덕스']);

applyMiddleware() : Middleware(미들웨어)를 적용하기 위해 필요한 함수

const store = createStore(todoReducer, ['처음 만난 리덕스'], applyMiddleware(loggerMiddleware));

getState() : state를 가져오는 역할을 하는 함수

- State란?
: Redux Store에 저장된 state tree

console.log('dispatch 이후 state', getState()); // 미들웨어 내부
console.log(store.getState()); // 미들웨어 외부

dispatch(action): 디스패처의 역할

store.dispatch({
	type: 'ADD_TODO',
    text: '리덕스 강의 열심히 듣기'
});

[실습] TODO 애플리케이션 만들기

- HTML에서 JS와 Redux만을 이용해서 진행

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

<button id="logging-state">State Logging</button>

</div>

function todoReducer(state, action){

switch(action.type){

case "ADD_TODO":

return state.concat(action.text);

default:

return state;

}

function loggerMiddleware({getState}){ // 구조분해할당: 파라미터 중 getState만 꺼내서 사용

return (next) => (action) => {

console.log("dispatch 예정 action", action);

// Middleware chain에 있는 다음 dispatch 함수를 호출

const returnValue = next(action);

console.log("dispatch 이후 state", getState());

return returnValue;

};

}

var store = Redux.createStore(

todoReducer,

["처음 만난 리덕스 공부하기"],

Redux.applyMiddleware(loggerMiddleware)

);

var todoListElem = document.getElementById("todo-list");

var inputElem = document.getElementById("input-text");

function render() {

// 이전 TODO 목록 초기화 (아이템이 중복으로 쌓이지 않기 위함)

todoListElem.innerHTML="";

// TODO 목록 렌더링

store.getState().forEach((todo) => { // getState 함수: store에서 현재 state 가져옴

// 반복문 사용해 아이템의 개수만큼 li 태그 만들어 ul 태그에 append

const todoListItemElem = document.createElement("li");

todoListItemElem.textContent=todo;

todoListElem.appendChild(todoListItemElem);

});

}

render();

store.subscribe(render); // Redux Store의 state가 변경될 때마다 render 함수 호출

document

.getElementById("add-button")

.addEventListener("click", function(){

// Action을 실제로 dispatch

store.dispatch({ // 아래 속성을 가지는 Action 객체를 만들어 dispatch

type: "ADD_TODO",

text: inputElem.value,

});

// Input 초기화

inputElem.value = "";

});

document

.getElementById("logging-state")

.addEventListener("click", function(){

console.log("현재 state", store.getState());

});

</script>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[처음 만난 리덕스] 2. Redux 시작하기

ypearl — Mon, 25 Dec 2023 02:04:36 +0900

Redux 구성 요소

Store(스토어)
: Redux의 데이터들을 저장하기 위한 저장소
State
: Redux Store에 저장되어 있는 데이터
Action(액션)
: Redux Store에 저장된 데이터에 변화를 주기 위한 행동
(JavaScript 객체 형태로 존재)
Action 생성자
: Action 객체를 생성하는 역할을 하는 함수
Reducer
: 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정
= Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수

Immutability (불변성)

: 리덕스 원칙 중

2. State is read-only

3. Changes are made with pure functions

=> Redux State 생성 후에는 값을 바꿀 수 없다!

Redux를 사용해야 하는 경우

1. 하나의 상태를 여러 컴포넌트에서 접근해야 할 경우

예) 로그인 여부

2. 한 곳에서 상태들을 관리하고 싶을 경우

*그렇다고, 모든 state를 Redux Store에 넣는 것이 정답은 아님

=> 꼭 필요한 state들만 Redux를 통해 관리하자!

Redux vs Context API

Context API?

React 컴포넌트들 사이, 데이터를 기존의 props를 통해 전달하는 방식대신,

컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 새로운 방식 제공
(어떤 컴포넌트든지 데이터에 쉽게 접근 가능)

기존 방식 vs Context 사용 방식

- 여러 개의 Component들이 접근해야 하는 데이터일 때 사용
예) 로그인 여부, 로그인 정보, UI 테마 등의 데이터

공통점

- Prop Drilling 문제를 해결하기 위한 방법

* Prop Drilling: 여러 단계에 걸쳐 Props를 통해 데이터를 전달하는 것

차이점

1. redux-devtools

: 모든 상태 변화를 시각적으로 확인할 수 있게 해주고,

이전 상태로 돌아가 하나씩 액션을 실행하며 디버깅할 수 있음

2. Context API는 특정 Context에 의존하는 컴포넌트들을 분리 가능

: 해당 Context와 관련이 없는 컴포넌트는 애초에 데이터에 접근이 불가능해지기에

의도치 않게 발생할 수 있는 사이드 이펙트를 사전에 방지할 수 있음

3. 데이터 처리 방식

Redux: 전체 애플리케이션 데이터를 Redux Store라는 하나의 거대한 객체로 관리
- 사전에 정의된 Action과 Reducer를 통해서만 상태 변경 가능
Context: 오로지 하나로 구성되어 있지도 않고, 데이터를 별도로 관리하지도 않음
- Context는 State를 들고 있는 것이 아닌, State를 전달하기 위한 통로의 역할만 함

Redux와 Context의 데이터 처리 방식 차이

그럼 둘 중 무엇을 사용해야 하는가?

: 상황에 따라 판단

규모 ↑, 상태 ↑ → Redux
규모 ↓, 상태 ↓ → Context API

[실습] Counter 애플리케이션 만들기

- HTML에서 JS와 Redux만을 이용해서 진행

<!DOCTYPE html>

<head>

<title>처음 만난 리덕스 - Counter</title>

</head>

<body>

<p>Counter: <span id="value">0</span></p>

<div>

</div>

function counter(state, action){ // Reducer: 현재 State와 Action 객체를 받아 변경된 새로운 State를 리턴

if(typeof state ==="undefined"){

return 0;

}

switch(action.type){

case "INCREMENT":

return state +1;

case "DECREMENT":

return state -1;

default:

return state;

}

var store = Redux.createStore(counter); // createStore 함수를 통해 Store 생성

var valueElem = document.getElementById("value"); // value id를 가져옴

function render() { // render 함수: Redux Store에 있는 count값을 valueElement에 넣음

valueElem.innerHTML = store.getState().toString(); // store.getstate 함수 - Redux Store의 전체 State 가져옴

}

render();

store.subscribe(render); // Redux Store의 State가 변경될 때마다 render 함수 호출

// 실제 Redux Action을 Dispatch하는 코드

document

.getElementById("increment") // 버튼 element 가져와 클릭 이벤트 리스너 추가

.addEventListener("click", function() {

store.dispatch({type: "INCREMENT"}); // 액션 타입

});

document

.getElementById("decrement")

.addEventListener("click", function() {

store.dispatch({type: "DECREMENT"});

});

</script>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[처음 만난 리덕스] 1. Redux 소개

ypearl — Mon, 25 Dec 2023 01:37:44 +0900

리덕스(Redux) 탄생 과정

SPA 등장으로, 웹사이트의 규모가 커짐

→ 상태 관리의 복잡도 증가
(서버로부터 받아온 데이터, 로컬 데이터, UI 컴포넌트의 상태 등..)

언제 어디서 어떻게 상태(state)가 업데이트 되는지 파악하기 힘들어짐

상태 업데이트의 원인을 파악할 수 없다면,

버그 재현 및 수정이 어려움

상태 관리만을 위한 리덕스(Redux) 등장!

Flux 아키텍처

: 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍쳐

= 데이터의 흐름을 정의한 하나의 방법

액션(Action): 데이터 흐름에 변화를 주기 위한 어떤 동작이 발생한 것
디스패처(Dispatcher): 액션을 발송하는 역할 (액션의 수신자: 리덕스)
스토어(Store): 데이터를 저장하는 공간
뷰(View): 스토어에서 가져온 데이터를 보여줌
*뷰에서 또다른 액션이 발생하면 단방향 동일한 흐름으로 처리됨

플렉스(Flux)와 리덕스(Redux)의 관계

= Redux implements Flux (리덕스가 플렉스를 구현)

플렉스(Flux): 데이터의 흐름을 정의하는 패턴
(추상적 개념을 구조화 시켜 정의)
리덕스(Redux): 플렉스라는 아키텍처를 실제로 구현한 구현체
(Flux를 곧바로 사용할 수 있게 한 라이브러리)

리덕스의 세 가지 원칙★

단 하나의 진실의 원천 (Single source of truth)
: 진실이라고 여겨지는 값이 여러 곳이 아닌 단 한 곳에만 존재해야 한다.
- 리덕스 에서는 애플리케이션의 모든 상태들을 Redux 스토어(Store)에 저장
- 이 Redux Store가 Single source of truth
- 어떤 상태의 값의 변경을 확인하고자 할 때 Store 내부에서 해당 상태의 값의 변화만 확인하면 됨
상태 값은 읽기 전용 (State is read-only)
: 사전에 정의해둔 어떤 상황이 발생했을 경우에, 사전에 정해진대로만 상태를 변경할 수 있음!
- 모든 상태의 변화가 단 한곳에서 정해진 상황과 규칙에 따라 발생
변화는 순수 함수들을 통해 이뤄져야 함 (Changes are made with pure functions)
: 모든 Reducer는 pure function이어야 한다.
- 순수함수: 입력값을 변경하지 않으며, 같은 입력값에 대해 항상 같은 출력값을 리턴함

Redux의 세 번째 원칙

리덕스의 데이터 흐름

상태 관리를 위해 꼭 리덕스여야만 할까?

- 다른 상태관리 라이브러리들

: MobX, Recoil, ZUSTAND, Jotai 등

하지만, 리덕스가 압도적으로 상위권을 유지하고 있기에

리덕스는 필수적으로 사용해보아야 한다.

반응형 웹 기초: 가변 동영상

ypearl — Sun, 24 Dec 2023 14:57:30 +0900

동영상은... 비교적 덜 간단

이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를,

동영상에도 똑같이 적용할 수 있다.

그러나 문제는, 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것!

<iframe width="560" height="315" src="https://www.youtube.com/embed/BYMM5Dh_tSY?si=KL5EGFg35cGH2SXW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

단순히 사이즈만 변경해서는, 프레임의 크기는 변화하지만

실제 콘텐츠(동영상)의 크기는 변하지 않는다.

해결방법

- 여백을 만들고, 그 여백에 절대값을 준다.

: 이때 여백의 크기는 "종횡비(height/width)"에 달려있다!

<!DOCTYPE html>

<head>

<style>

.player{

padding-top: 56.25%;

position: relative;

}

iframe{

position: absolute;

top: 0; left: 0;

width: 100%;

height: 100%;

}

</style>

</head>

<body>

</div>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

반응형 웹 기초: 가변 이미지

ypearl — Sun, 24 Dec 2023 14:36:33 +0900

이미지 요소에도...

상대단위 em, vw, % 등을 얼마든지 사용할 수 있다.

이때 주의 해야할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점,

그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다.

max-width

CSS의 max-width 속성은 너비의 최대값을 지정하여

요소의 너비가 그 이상 커지지 않게 한다.

*width와 max-width의 차이

width: 너비 지정
max-width: 제한 길이 지정 (이보다 커질 수 없다~)

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등

브라우저의 특정 조건에 따라 이미지를 반응형으로 불러올 수 있다.

주로, 해상도 별로 이미지의 비율을 바꾸고 싶을 때 사용!

<picture>
    // source: 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소
    <source srcset="desktop.png" media="(min-width: 1200px)">
    <source srcset="tablet.png" media="(min-width: 800px)">
    <img src="mobile.png">
</picture>

<!DOCTYPE html>

<head>

<style>

div{

width: 50%;

}

img{

max-width: 100%;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

</picture>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

반응형 웹 기초: 미디어쿼리

ypearl — Sun, 24 Dec 2023 14:16:19 +0900

미디어 쿼리

미디어 쿼리(media query)는 미디어 타입을 인식하고,

콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다.

모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다.

미디어 타입
screen, print, speech 등
조건에 대한 물음(쿼리)

*화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다.

속성명	정의
min-width	디스플레이 영역의 최소 너비
max-width	디스플레이 영역의 최대 너비
min-height	디스플레이 영역의 최소 높이
max-height	디스플레이 영역의 최대 높이
orientation	portrait 또는 landscape 감지
color	기기의 색상당 비트 수
color-index	출력 기기의 색상 테이블 수
aspect-ratio	디스플레이 영역의 너비와 높이의 비율

미디어쿼리 형태

미디어 쿼리 적용의 다른 형태

다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있다. (잘 사용하지는 X)

<!DOCTYPE html>

<head>

<style>

img{

width: 200px;

height: 200px;

}

@media screen and (min-width: 800px){

img{

width: 400px;

height: 400px;

}

@media screen and (min-width: 1200px){

img{

width: 800px;

height: 800px;

}

</style>

</head>

<body>

</body>

</html>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.