[항해99] 리덕스 세션

posinity·2022년 12월 7일

React 항해99

[항해99] 특강

목록 보기

6/11

state : 변할 수 있는 값. 변수
화면에 있는 요소들을 상태화 해서 값으로 저장

useState의 단점 > props drilling : 한 state를 여러 컴포넌트가 써야 할 때 계속 props로 거쳐서 가야한다는 점

컴포넌트 > props > 컴포넌트의 데이터 전달 방식을
중앙에 스토어를 두고 state가 필요한 컴포넌트와 주고받는 형식으로 쓸 수 있음

dispatch : 컴포넌트가 이러이러한거 줘! 라고 해주는 것

리듀서가 스토어의 상태를 새롭게 업데이트. 컴포넌트의 명령에 따라서 명령에 따른 case의 return값을 주고 컴포넌트는 그 값을 useSelector로 꺼내올 수 있다.

스토어에 들어가는 것

액션 크리에이터
초기값 : 이 스토어가 가질 가장 최초의 값
리듀서 : 인자로 state, action을 받는 함수. action.type에 따라 값을 반환한다.

스토어 만들기

configStore.js 파일에 기본 코드 붙혀넣기
index.js 파일에 기본 코드 붙혀넣기
모듈 만들기

// todos.js //모듈 설정

// 액션 크리에이터

//추가하기
//삭제하기

// 초기값
const initialState = {
  todos: [{ id : 1, title: "react"}],
}

//리듀서
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return {};
    case "DELETE_TODO":
      return {}; 

    default:
      return state;
  }
}

export default reducer; 
// 모듈에서 export default를 할 대상은 반드시 리듀서여야 한다!

configstore(스토어)에서 모듈 추가해주기

import todos from "../modules/todos";

const rootReducer = combineReducers({
  todos, //객체에서 키와 값이 같으면 이렇게 줄일 수 있음
});

제대로 통신되었는지 확인하는 법

//app.js

const App = () => {
	const todos = useSelector((state) => {
     return state
    })
    
    console.log(todos)
}

콘솔에 초기값이 잘 찍혔으면 성공

map함수 돌리는 법

map함수를 돌릴 대상은 '배열'이어야 한다

//app.js

const App = () => {
	const todos = useSelector((state) => {
     return state.todos.todos //배열로 만드는 과정 : map함수를 돌리기 위해
    })
    
    console.log(todos)
    
    return (
    	<div>
        	{todos.map((todo) => (
            	<div>{todo.title}</div>
            ))}
        </div>
    )
}

버튼에 onClick = {onClickBtnHandler} 연결하고

const onClickBtnHandler = () => {console.log("확인")}

이런식으로 코드 써서 버튼 클릭해서 제대로 연결했는지 확인해보기
{} 안에는 디스패치가 들어간다.
디스패치 안에는 액션 객체가 들어가야 함!
함수 들어가면 안된다

이 부분이 리듀서로 감

const onClickBtnHandler = () => {
  dispatch({
  	type : "ADD_TODO" , todo : {
    	id : new Date(),
      	title,
    },
  })
}

리듀서에서 console.log(action) 찍어서 제대로 갔는지 확인해보기.

위에 액션 객체를 다 쓰기 귀찮으니까 액션객체를 만드는 함수를 따로 만듦 > 액션 크리에이터 > 타입을 리턴하는 함수

//액션 크리에이터
const ADD_TODO = "ADD_TODO" //상수로 만듦

export const addTodo = (todo) => {
	return {
    	type: ADD_TODO,
        todo,
    }
}

개발자끼리는 인자로 payload를 많이 씀

//액션 크리에이터
const ADD_TODO = "ADD_TODO" //상수로 만듦

export const addTodo = (payload) => {
	return {
    	type: ADD_TODO,
        payload,
    }
}

위와 같이 만들어주면 아래처럼 dispatch를 쓸 수 있다.

const onClickBtnHandler = () => {
  dispatch(addTodo());
}

addTodo() : 값 // {type: , }
addTodo : 함수

삭제하기

삭제하기는 id값을 보내줘야 함.
button onClick으로 핸들러 함수를 실행하되, 핸들러 함수에서 onDeleteTodoHandler(todo.id) 처럼 todo의 id를 인자로 전달한다.

const onDeleteTodoHandler = (id) => {
	dispatch(deleteTodo(id))
}

이런식으로 id를 보내기

렌더링은 state가 바뀌면 렌더링된다.
리듀서에서 새로운 값을 줄 때

export

export는 여러개 할 수 있고, 여러개 가져올 수 있지만
export default는 하나만 할 수 있다

export default한 것은 Import할 때 이름을 바꿀 수 있지만 export한 것은 이름을 바꾸면 안된다

as 쓰면 바꿀 수 있음

import {shownumber as 이름바꾸기} from "./test"

import * from "./test"
이 파일에 export된 모든 것을 가져올 수 있음

버튼 파일 만들어서 이런식으로 해놓고

//버튼 들어있는 파일
export const Icon = () => {
	return <div></div>
}

export const Button = () => {
	return <div></div>
}

//버튼 들어있는거 전체 임포트
import * as Button from "./test"

const App = () => {
	return (
    	<div>
        	<Button.Button/> //필요한 곳에 가져다쓰기
            <Button.Icon/>
        </div>
    )
}