[TIL] 20240517 - event, redux

event

---

🧊 이벤트 규칙

이벤트 이름은 camelCase로 작성

• onclick → onClick

• onchange → onChange
  
  

자바스크립트 코드가 아닌, 함수 형태의 값을 전달

• HTML : 큰따옴표 안에 실행할 코드 → onclick="alter('click')"

• React : 함수 형태의 객체 전달 → onClick={handleClick}

🧊 onClick

onClick 이벤트는 버튼을 클릭했을 때 특정 기능을 수행

const DeleteTask = () => {
  const handleDelete = () => {
  	dispatch(
      deleteTask({
        boardId: editingState.boardId,
        listId: editingState.listId,
        taskId: editingState.task.taskId
      })
    )
  }
  
  return (
  	<button onClick={handleDelete}>
      Delete
    </button>
  )
}

onChange

const InputForm = () => {
  const handleChange = () => {
    const [inputText, setInputText] = useState('');
    
    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value);
  }
    
  return (
    <div>
      <input 
        type='text'
        value={inputText}
        onChange={handleChange}
      />
    </div>
  )
}

@reduxjs/toolkit

---

React에서 전역 상태 관리를 위한 라이브러리

Install

npm install redux react-redux @reduxjs/toolkit

🧊 sub reducer 생성

store > slices > boardsSlice.ts

import { PayloadAction, createSlice } from "@reduxjs/toolkit";

// boardsSlice의 타입
type TBoardState = {
  modalActive: boolean;
  boardArray: IBoard[]
}

type TAddBoardAction = {
  board: IBoard;
}

// boardsSlice의 초깃값
const initialState: TBoardState = {
  modalActive: false,
  boardArray: [
    {
      boardId: 'board-0',
      boardName: "default board",
    ...
  ]
}

// slice를 이용해 reducer 생성
const boardsSlice = createSlice({
  name: 'boards',
  initialState,
  reducers: {
    addBoard: (state, { payload }: PayloadAction<TAddBoardAction>) => {
      state.boardArray.push(payload.board);
    },

❄️ createSlice

createSlice = createReducer + createAction
createSlice에 선언된 슬라이스 이름, 초기 상태 값을 받아서 해당 액션 생성자와 액션 타입으로 리듀서 자동 생성

• name : reducer 이름
• initialState : 초깃값
• reducers : 상태가 변하면 실행될 코드
  
  

❄️ PayloadAction

action 객체의 payload 필드의 타입을 정의

🧊 reducer 생성

sub reducer들을 모아서 reducer를 생성
store > reducer > reducer.ts

import { boardsReducer } from "../slices/boardsSlice";
...

const reducer = {
  boards: boardsReducer,
  ...
}

export default reducer;

🧊 store에 생성

reducer를 store에 저장

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer/reducer";

const store = configureStore({
  reducer
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch;

export default store;

❄️ configureStore

Redux store를 생성하기 위해 사용

• store : state를 보유하고 state의 변화를 관리하는 저장소

🧊 Provider로 react component 감싸주기

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Provider } from 'react-redux'
import store from './store/index.ts'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
)

❄️ Provider

Provider는 리액트 앱에 store를 쉽게 연동할 수 있도록 도와주는 컴포넌트