📝 댓글 CRUD with Redux

📌 배포 사이트

Team

강태훈

김민정

김종이

이상현

이요한

이조은

🗓 일정 : 2023.01.16 - 01.19

목차

1. 프로젝트 실행 방법
2. 구현사항

프로젝트 실행 방법

# npm 설치
npm install

# Local Server 실행
npx json-server ./data.json --port 4000

REACT_APP_URL="http://localhost:4000"

# 로컬 실행
npm start

기술스택

React, TypeScript, Redux, axios, json-server, styled-components

구현사항

1. redux를 사용해서 비동기 처리 - 댓글 CRUD

pre-onboarding-8th-4week-6/src/redux/commentSlice.ts

Lines 59 to 88 in ace0e8d

	export const commentSlice = createSlice({
	name: 'comment',
	initialState,
	reducers: {
	},
	extraReducers: (builder) => {
	builder.addCase(getAllList.fulfilled, (state, action) => {
	console.log(action);
	state.maxNum = action.payload.length;
	});
	builder.addCase(getList.fulfilled, (state, action) => {
	state.comment = action.payload;
	});
	builder.addCase(addList.fulfilled, (state, { payload }) => {
	state.comment.pop();
	state.comment.unshift(payload);
	state.maxNum += 1;
	});
	builder.addCase(updateList.fulfilled, (state, { payload }) => {
	const index = state.comment.findIndex(item => item.id == payload.id);
	if (payload.id) state.comment.splice(index, 1, payload);
	});
	builder.addCase(delList.fulfilled, (state, action) => {
	const index = action.meta.arg;
	const NewState = state.comment.filter(state => state.id != index);
	state.comment = NewState;
	state.maxNum -= 1;
	});
	},
	})

pre-onboarding-8th-4week-6/src/redux/store.ts

Lines 7 to 13 in f7b2751

	const store = configureStore({
	reducer: {
	comment: commentSlice.reducer,
	},
	middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
	devTools: process.env.NODE_ENV !== 'production',
	});

• 비동기 처리 댓글 CRUD는 Redux createAsyncThunk를 사용해 구현했습니다.
• Redux logger, Redux-Devtools 설정하였습니다.

2. 페이지네이션

pre-onboarding-8th-4week-6/src/hooks/usePagenation.tsx

Lines 19 to 25 in f7b2751

	useEffect(() => {
	async function fetchMaxData() {
	await dispatch(getAllList());
	setMaxPage(Math.ceil(Maxlength / 4));
	}
	fetchMaxData();
	}, [focusNum, Maxlength]);

pre-onboarding-8th-4week-6/src/components/PageList.tsx

Lines 8 to 21 in f7b2751

	export default function PageList({focusNum, maxPage, handleClick}: PageProps) {
	const pageArray = [];
	for (let i = 1; i <= maxPage; i++){
	pageArray.push(
	<Page
	key={i}
	isFocus={focusNum == i ? true : false}
	onClick={(e) => handleClick(i, e)}
	>{i}
	</Page>);
	}
	return <PageListStyle>{pageArray}</PageListStyle>;
	}

• 페이지네이션은 useEffect 내 async await를 사용하여 처리했습니다.
• 총 댓글수를 비동기로 받아와 응답값을 이용해 계산, 한 페이지당 4개씩 게시글을 호출했습니다.

3. 댓글 작성, 수정, 삭제 후 동작

pre-onboarding-8th-4week-6/src/components/Form.tsx

Lines 15 to 26 in f7b2751

	const handleSubmit = (e: any) => {
	e.preventDefault();
	if (form.id) {
	dispatch(updateList(form));
	dispatch(getList(focusNum));
	} else {
	dispatch(addList(form));
	dispatch(getList(focusNum));
	handleClick(1);
	}
	setForm({ profile_url: "https://picsum.photos/id/1/50/50", createdAt: "2020-05-30" });
	};

pre-onboarding-8th-4week-6/src/hooks/usePagenation.tsx

Lines 13 to 17 in f7b2751

	const handleClick = (page: number, e?: any) => {
	if (e) setFocusNum(e.target.textContent);
	else if (e === undefined) setFocusNum(1);
	dispatch(getList(page));
	}

• 댓글 작성하고 난 뒤: 다른 페이지에 위치하고 있었더라도 1페이지로 이동, 입력 폼 초기화
• 댓글 수정하고 난 뒤: 현재 보고있는 페이지 유지, 입력 폼 초기화
• 삭제하고 난 뒤: 1페이지로 이동

요구사항

• Redux 환경설정은 자유롭게 진행
  • Redux-saga or Redux-thunk 자유롭게 선택 가능
  • 미들웨어 사용안하는 것도 가능
• Redux logger, Redux-Devtools 설정 필수
• Redux를 이용한 비동기 처리 필수