Project : helprogrammers - 상세 페이지

❤️‍🔥TIL : Today I Learned

 

 

🤢 문제 내용 :

 

문제 참 많았다...

정리해 보자면

 

나는 게시글을 클릭 했을 때,

router 가 변하며 해당 라우터에서 상세 내용(제목,내용,시간 등..)을

보여주는 페이지의 crud 기능 구현을 맡게 되었다.

 

문제는 이렇게 흘러갔다

 

1. 해당 컴포넌트 렌더링 될 때  useLocation 사용하여 axios.get 요청
       문제점 - 다른 액션 발생할 때(delete,update) 추후 데이터 수정의 어려움을 깨닫게 됨
   
   
2. thunk를 사용하여 detailSlice.js 생성하여 부모컴포넌트에서 onClick이 이루어 질 때 dispatch(__getDetail)
       문제점 - 상세페이지에서 새로고침 하면 state 값이 리셋되어 결국 새로고침을 하면 상세페이지 내용 없어짐
3. 1번에서 가져온 방식보다 더 깔끔하게 useParams 사용하여 쉽게 id 가져와 dispatch(__getDetail(id))
       해결

 

---

🔨 시도한 방법 (코드 변천사)

 

1. 해당 컴포넌트 렌더링 될 때 useLocation 사용하여 axios.get 요청

// Question.jsx

  const location = useLocation();
  const dispatch = useDispatch();
  
  // state 값
  const [questionState, setQuestionState] = useState('');

  // useEfect로 컴포넌트 렌더링 시 axios 데이터 받아오기
  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get(
        `http://localhost:3001/questions${location.pathname}`,
      );
      // 받은데이터 state로 업로드
      setQuestionState(data);
    };
    getData();
  }, []);

 

 

2. thunk를 사용하여 detailSlice.js 생성

// ListCard.jsx

import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { __getDetail } from '../redux/module/DetailSlice';

const ListCard = ({ question }) => {
  const dispatch = useDispatch();

  const onClickEvent = (id) => {
    dispatch(__getDetail(id));
  };
  return (
    <QuestionLink to={`/${question.id}`}>  // Detail.jsx 컴포넌트 이동
      <Thread onClick={() => onClickEvent(question.id)}>
  );
}

 

---

 

🎈 문제 해결 방법 :  

3.  useParams 사용하여 쉽게 id 가져온 후, dispatch(__getDetail(id))

// Detail.jsx

import React, { useEffect } from 'react';
import { useSelector, useDispatch, } from 'react-redux';
import { __deleteDetail, __getDetail } from '../redux/module/DetailSlice';
import { useParams } from 'react-router-dom';

const Detail = () => {
  const dispatch = useDispatch();
  
  // 구조분해 할당
  const { isLoading, error, question } = useSelector((state)=> state.detail);
  const { id } = useParams();
  
  // component mount 즉시 코드 실행
  useEffect(()=>{
    dispatch(__getDetail(id))
  },[])

  if (isLoading) {
    return <div>로딩 중..</div>
  }
  if (error) {
    return <div>존재하지 않는 페이지 입니다..</div>
  }
  
  return <div>이하 생략..</div>
}

 

 

// detailSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const serverUrl = 'http://localhost:3001/questions';

// question 이라는 state 생성
const initialState = {
  question: [],
  isLoading: false,
  error: null,
};

export const __getDetail = createAsyncThunk(
  'GET_DETAIL',
  async (payload, thunkAPI) => {
    try {
      const data = await axios.get(
        `${serverUrl}/${payload}`, // payload로 전달 받은 id 값 가져오기
      );
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);


export const detailSlice = createSlice({
  name: 'detail',
  initialState,
  reducers: {},
  extraReducers: {
    // read
    [__getDetail.pending]: (state) => {
      state.isLoading = true; // 네트워크 요청이 시작되면 로딩상태를 true로 변경합니다.
    },
    [__getDetail.fulfilled]: (state, action) => {
      state.isLoading = false; // 네트워크 요청이 끝났으니, false로 변경합니다.
      state.question = action.payload; // question state에 payload로 받은 id값 저장
    },
    [__getDetail.rejected]: (state, action) => {
      state.isLoading = false; // 에러가 발생했지만, 네트워크 요청이 끝났으니, false로 변경합니다.
      state.error = action.payload; // catch 된 error 객체를 state.error에 넣습니다.
    },
  },
});

export const detail = detailSlice.actions;
export default detailSlice.reducer;

 

 

---

✨ 알게된 것

 

여기서 보면 question 이라는 state에 업데이트를 하는 것을 알 수 있다.

state는 임시 저장과 같은 원리라서 새로고침이 된다면

state에 있는 데이터는 다 날아간다..

 

그래서 상세페이지(Detail.jsx) 컴포넌트가 mount 될 때 useParams() 함수로 가져온 아이디를

useEffect를 활용해 바로 __getDetail( id )을 실행해서 해당 state를 업데이트 할 수 있도록

업데이트 해줬다

 

그래서 새로고침이 되더라도 useEffect 는 실행이 되므로

state는 업데이트가 되어있는 상태로 표시되어

 

새로고침시 아무것도 안남게 되는 문제를 해결했다!