230822~23 day92~93 개념 정리

useAsync 커스텀 훅 
+ context

const userContext = createContext("abc")
const userName = useContext(userContext)

UsersContext


리덕스 

액션 (Action)

상태에 어떠한 변화가 필요할 때 액션을 발생시킴 
액션 객체는 type필드를 꼭 갖고 있어야함, 그 외는 추가 가능

{
	type: "SUCCESS"
	data: response.data
}


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

필요한 파라미터를 받아서 액션 객체를 리턴해주는 함수 

function addTodo(data) {
	return {
		type: "ADD_TODO",
		data: data
	}
}


// 객체 리턴
화살표 함수로 변형 -> 겉에 소괄호() 추가
const addTodo = () => ({ type: "ADD_TODO", data: data })


리듀서 (Reducer)
: 상태의 변화를 일으키는 함수, 두 가지의 파라미터를 받음 

현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어서 반환 

function reducer(state, action) {
	
}


스토어 (Store) 
애플리케이션의 모든 데이터의 상태를 관리해주기 위한 중앙집중식 창고 

리덕스에서는 한 애플리케이션 당 하나의 스토어를 생성 
현재의 앱 상태, 리듀서가 들어있음 


리덕스 사용하기 

1) 프로젝트 생성, 라이브러리 설치, redux devtools 설치 

npx create-react-app learn-redux
npm install redux
npm install react-redux


2) 리액트 리덕스 내장함수, 훅 함수

스토어 생성하기
createStore(리듀서 함수)

리덕스 스토어 상태 조회하는 훅 함수 
useSelector(state => state)

리덕스 스토어 디스패치 반환하는 훅 함수 
useDispatch() ---> dispatch 반환해줌


3) 리덕스 모듈 생성 (modules 폴더)
리액트 프로젝트에 리덕스를 적용하려면 리덕스 모듈을 만들어야함 

리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 
자바스크립트 파일 

여러 개의 리덕스 모듈을 생성해서 하나의 리덕스 모듈로 합쳐서 사용


combineReducers({ 리덕스 모듈 객체 }) : 함수를 사용해서 리덕스 모듈을 합쳐줌 

ex> const rootReducer = combineReducers({
	리덕스 모듈 1 : 리덕스 모듈 1,
	리덕스 모듈 2 : 리덕스 모듈 2
	---> 합쳐진 리듀서가 됨 
})


1. counter 모듈 생성 
값 더하기
값 빼기
값 설정 


2. 컴포넌트 
프레젠테이셔널 컴포넌트 화면 Todos.js
컨테이너 컴포넌트  TodosContainer.js