[React] React 기본 개념 정리

reducer 현재 상태와 액션 객체를 파라미터로 받아 새로운 상태로 변환 해주는 함수

function reducer(state, action) {
	switch(action.type){
    
		return nextState;
	}
}

UseReducer 상태관리를 하는 함수로써, reducer 함수를 호출하여 사용한다.

const [ state, dispatch ] = useReducer(reducer, initial);

state 현재상태

dispatch 액션을 발생 시키는 함수 

ex). dispatch({type: 'CREATE_MEMBER'}); 

reducer 상태 변환 함수

initial 초기값 

Context API 프로젝트의 상태를 전역적으로 관리해줌

 

리덕스

리덕스에는 사용되는 몇가지 키워드 들이 있다.  숙지하자

• 액션(Action)  :  상태를 변환 시 액션 객체를 발생 시키며 다음과 같은 형식이다. ( type은 필수 )

{
	type:'CREATE'
	data: {
		id: 0,
		text: "안녕하세요"
	}
}

 

• 액션 생성함수(Action Creator) :  액션을 만드는 함수 

export const onChange = () => ({
	type:'CREATE',
	text
});

 

• 리듀서 (Reducer) :  변화를 일으키는 함수

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

 

• 스토어 (Store) : 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있다, 하나의 애플리케이션에는 하나의 스토어만 필요.

• 디스패치 (dispatch) : 스토어의 내장 함수, 액션을 발생 시키는 것이며 dispatch 함수를 통해 액션을 파라미터로 전달.

• 구독 (subscribe) : 스토어의 내장 함수, 함수 형태의 값을 파라미터로 받아오며,  구독 함수에 특정 함수를 전달하면 액션이 디스패치 될때마다 전달해준 함수가 호출.