2024.02.16 TIL

 

Redux Toolkit

리덕스 사용을 용이하게 하는 라이브러리

리덕스 툴킷에 필요한 값 세가지 : 타입이름, 이니셜스테이트(초기값), 리듀서

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => { state를 변경하는 코드 },
    removeTodo: (state, action) => {},
    switchTodo: (state, action) => {},
  },
});

export const { addTodo, removeTodo, switchTodo } = todoSlice.actions;
export default todoSlice.reducer;

 

 

useEffect와 옵셔널 체이닝

드디어 useEffect에 setState시 일어나는 undefined 오류에 대해 이해했다. 

https://seopport-u.tistory.com/23   전에도 고민했던 오류

import axios from 'axios';
import React, { useEffect, useState } from 'react';

const App = () => {
  const [todos, setTodos] = useState(null);

  const fetchTodos = async () => {
    const { data } = await axios.get('http://localhost:4000/todos');
    setTodos(data);
  };

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <div>
      {todos?.map((item) => {
        return (
          <div
            style={{ padding: '20px', backgroundColor: 'beige' }}
            key={crypto.randomUUID()}
          >
            {item.id} : {item.title}
          </div>
        );
      })}
    </div>
  );
};

export default App;

일단 useEffect 사용법을 잘 못 알고 있었다. useEffect는 브라우저 렌더링이 완료 된 후 실행되는 함수이다.

그러면 fetchTodo는 비동기 함수이기 때문에 일단 지나가고 return문의 todos를 렌더링하게 되는데, 아직 useEffect안의 fetchTodos가 실행되지 않았기 때문에 todos는 null이다. 따라서 렌더링 완료 후 todos에 값이 들어오게 되기 때문에 값이 들어오기 전 todos(null)를 map을 돌려버리면 에러가 나게 되는것이다.

이러한 문제는 Optional Chaining이라는 자바스크립트 문법을 통해 간단하게 해결할 수 있다.

옵셔널 체이닝은 물음표(?.)를 사용하여 객체의 속성에 안전하게 접근하는 방법이다. 만약 해당 속성이 존재하지 않는다면 undefined를 반환하고 코드 실행을 중단하지 않는다. (렌더링 시 에러가 뜨지않고 값만 안나옴)

todos에 물음표를 붙여 옵셔널 체이닝을 걸면 todos가 null 또는 undefined가 아닐 때에만 map() 함수를 호출하게 된다. todos가 null이거나 undefined인 경우에는 map() 함수가 실행되지 않고, 그대로 null을 반환한다. 이렇게 함으로써 todos에 데이터가 아직 들어오지 않았을 때 렌더링 시 오류가 나는 것을 방지할 수 있다.

 

axios의 Interceptor

인터셉터(Interceptor)는 소프트웨어나 하드웨어에서 요청이나 응답을 가로채서 처리하는 기능이다. 주로 네트워크 통신에서 사용되며, 요청이 서버로 보내지기 전에 가공하거나 응답이 클라이언트로 도착하기 전에 가공하는 데 사용한다.

 

인터셉터로 할 수 있는 것
 1. 요청할 때 content의 타입을 지정하기
 2. 토큰과 관련된 인증을 추가
 3. 서버 응답 코드에 대한 오류 처리
 4. 통신의 시작과 종료에 대한 전역상태 관리로 프로그래스 바, 진행상태 구현

 

 

 

제이슨 서버도 배포하면 사용자가 json sserver를 직접 설정하지 않아도 된다는걸 알게되었다

서버와 axios를 이용해서 데이터를 주고받는 것을 빨리 해보고싶다.