Facts (사실, 객관)
- Redux에 대해 처음 배움.
- 기존에 진행하던 프로젝트 ui를 수정함.
Feelings (느낌, 주관)
- 리덕스를 많이 들어봤지만 이렇게 자세하게 배운 건 처음이였다. 처음 강의를 들었을땐 정말 어질어질 했지만 공부를 하면서 반복해서 들어보니 흐름이 보이는 거 같았다.
Findings (배운 점)
단위 테스트 vs 통합 테스트
-
단위 테스트는 응용 프로그램에서 테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인하는 테스트이다.
-
일반적으로 클래스 또는 메소드 수준으로 정해진다.
-
단위의 크기가 작을수록 복잡성이 낮아지고, 동작을 표현하기가 더 쉬워진다. 즉, 테스트 대상 단위의 크기를 작게 설정해서 단위 테스트를 최대한 간단하고 디버깅하기 쉽게 작성해야 한다.
-
통합 테스트는 단위 테스트보다 더 큰 동작을 달성하기 위해 여러 모듈들을 모아 이들이 의도대로 협력하는지 확인하는 테스트이다.
-
통합 테스트는 단위 테스트와 달리 개발자가 변경할 수 없는 부분(ex. 외부 라이브러리)까지 묶어 검증할 때 사용한다. 이는 DB에 접근하거나 전체 코드와 다양한 환경이 제대로 작동하는지 확인하는데 필요한 모든 작업을 수행할 수 있다.
-
통합 테스트의 단점은 많은 코드를 테스트하기 때문에 신뢰성이 떨어질 수 있지만 단위 테스트에서 발견하기 어려운 버그를 찾을 수 있다는 장점이 있다.
리덕스 3가지 원칙
- 전체 상태값을 하나의 객체에 저장한다.
- 상태값은 불변 객체다.
- 상태값은 순수 함수에 의해서만 변경되어야 한다.
Redux 용어
Actions
- 애플리케이션에서 발생한 일을 설명하는 이벤트
- type : 이 작업을 설명하는 이름을 제공하는 문자열
- payload : 추가 정보
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}Reducers
- 현재 수신 함수 state와 action 객체를 필요한 경우 상태를 업데이트하는 방법을 결정하고, 새로운 상태를 반환한다.
- (state, action) => newState.
- 수신된 액션(이벤트) 유형에 따라 이벤트를 처리하는 이벤트 리스너로 생각할 수 있다.
const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
// Check to see if the reducer cares about this action
if (action.type === 'counter/incremented') {
// If so, make a copy of `state`
return {
...state,
// and update the copy with the new value
value: state.value + 1
}
}
// otherwise return the existing state unchanged
return state
}Store
- Reducer를 전달하여 생성되며 getState현재 상태 값을 반환 하는 메서드가 호출됩니다 .
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: counterReducer })
console.log(store.getState())
// {value: 0}Provider
- Redux store에 액세스해야 하는 중첩된 구성 요소가 Redux store를 사용할 수 있게함.
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { App } from './App'
import createStore from './createReduxStore'
const store = createStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)Dispatch
- 액션을 발생 시키고 액션을 파라미터로 전달한다. 이렇게 호출을 하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어 준다.
store.dispatch({ type: 'counter/incremented' })
console.log(store.getState())
// {value: 1}Affirmation(자기 선언)
- 어렵다고 포기하지 말자!!
