[React] 개인프젝 에러 : VITE 환경변수 설정 주의 & 리덕스 모듈에서 state로 위치 잘 쓰기

2.22 

해결하고보니 정말 가벼운 에러였지만 .. 찾느라 너무 오래걸렸다 .. ㅠㅠ

 

리덕스 툴킷, axios  - json-server  api , thunk 함수 까지  같이 쓰려다보니

정확히 잘 모르는 나는 ..

다른 데에서 에러가 난 줄 알고 한참을 헤맸다 😭

콘솔로 일일히 하나하나 찍어가며 다시 에러를 파악..

 

하지만 이 참에 useSelector 로 state 불러올 때라든가 정확히 알게 됐다 !!

 

---

// CommentList.jsx

const commentList = useSelector((state) => state.comments.commentsData);

..

useEffect(() => {
	dispatch(__getComments());
}, [dispatch]);

 

🔥Problem

리덕스툴킷으로 commentListSlice.js 모듈을 만들고,

commentList 를  메인페이지에 불러와서 뜨게 하고 싶었는데,  (json-server의 db.json에서)

useSelector 를 써서 가져오려고 하니...    commentList  목록이 뜨지않는 문제가 있었다. 

 

useEffect - 안에서 dispatch의 문제인가 싶었지만, 일단 commentList 가 들어오지 않는 것.

console.log(commentList) 로 확인해보니 빈 배열로 [ ] 뜨거나, 아예 이상하게 뜨거나 ..(웬 html파일같은)  등등  문제가 첨에 있었다.

 

 

---

🪄 Solving ✨

 

1) vite 환경변수 문제

첨에 아예 이상하게 떴던 것은, .env 파일에 json-server url 변수를 설정해  api에서 썼는데..,

그게 문제를 일으킨거였다. ...

.env 환경변수는 (CRA 프로젝트에서)  process.env.변수명  방식으로 가져와서 써야 한다고 하지만,

저번 글 ([React/Vite] 에러해결: Vite 프로젝트 .env 환경변수는 process.env => import.meta.env로 써주기)

에서 썼듯이 vite 사용 시라면 얘기가 다르다  

그래서 import.meta.env.변수명  이렇게 써줬던 것인데 ..(그리고 당시 화면이 잘 떴던 걸로 기억. 그래서 해결됐다고 생각했다..) ㅠㅠ 이게 안된다 ..

하튼 저렇게 변수가져와서 commentList 콘솔로 찍으면

이런 식으로 html문서가 뜬다 ... 

 

why...???  

 

=> 근데.. 저번 게시글에서도 내가 빼먹은 게 있었다. ..

Vite 프젝 환경변수 설정 시, 반드시 변수명은 VITE_로 시작해야한다 !!! 는 점..

근데 나는 REACT_.. 로 써줌 ㅠㅠ 

이건 원래 게시글에 내용 추가하기로!

 

 

 

 

 

2) 리덕스 모듈에서 state 로 가져오는 값 잘못 쓴 문제

하지만 그럼에도 풀리지 않는 문제. .. commentList 는 이제 위에 처럼 html파일로 뜨는 일은 없었지만, 빈 배열로 떴다.

처음에 commentList 가 가져와지지 못하는 건 useSelector에서의 문제일 수 있었다. 

하지만 확인해봤지만 맞았음.

useSelector((state) => state.comments.commentsData)   에서 오타도 없었고, 

여기서 comments 는 

// configStore.js

const store = configureStore({
	reducer: {
		comments,
		member,
		auth,
	},
});

이렇게 configStore.js 에서 써준 store 변수에 들어가 있는 comments 를 써준 것

 

아래 코드는 리덕스 모듈 commentListSlice.js

그리고 그 comments 의 initialState 객체에서 commentsData 키에 대한 밸류값  [] 배열을 가져오는 게 맞았기 때문에

// commentListSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import {
	createComment,
	getCommentsFromDB,
	updateComment,
} from "../../api/comment-api";

// thunk 를 통해, comment-api (json-server DB 활용)와 연결시키기?
export const __getComments = createAsyncThunk(
	"comment/getComments",
	async (payload, thunkAPI) => {
		try {
			// try-catch문도 포함시킴
			const comments = await getCommentsFromDB(); // comments는 배열
			return comments; // 리듀서로 넘겨주기
		} catch (err) {
			return thunkAPI.rejectWithValue(err); // 이렇게 써주면(문법), err에러객체가 extraReducers로 자동으로 넘어감 (거기서쓰는 state.erorr로)
		}
	}
);

....생략

const commentListSlice = createSlice({
	name: "comment", 
	initialState: {
		commentsData: [],   // 이 부분 !!!!
		isLoading: true, // json-server api 요청 (thunk로?) 후 받은 응답값에 따라 바뀐다
		isError: false,
		error: null,
	},
	reducers: {
	},
	extraReducers: (builder) => {
		builder
			.addCase(__getComments.fulfilled, (state, action) => {
				// comments(배열)를 action.payload로 넘겨받아
				state.commentsData = action.payload; // 여기서 state.comments.commentsData 써서 문제발생
			})
            
... 

	},
});

export default commentListSlice.reducer;

 

여기 코드에는 맞게 수정되어있는데..  extraReducers 에서 - __getComments thunk   case 써줄 때,

state.comments.commentsData  라고 써서 안 뜬 거였다.

 

=>

리스트.jsx에서, useSelector 해줄 때는 위처럼 쓰는게 맞게 불러오는 것이지만, (리덕스 store 통해 comments-> ...)

위의 모듈 Slice 안에서는 state.commentsData 로 바로 접근해주는 게 맞다

 

어쨋든 이거 찾느라고 axios api 부터 다 콘솔 찍고 확인해봤었다 .. ㅠㅠ

 

그래도 콘솔을 통해 에러를 잘 찾아 다행 !