[TIL]231208_React 댓글창 필터링하기

👩🏻‍💻 Today Learn

• 알고리즘 스터디
• 팀 프로젝트 진행
  • 설문조사 데이터 결과페이지

💡 알게된 내용

댓글창에서 선택된 항목이 없을때 전체 댓글 보이게 하기(초기값 없애기)

댓글기능을 구현하면서 댓글창에 처음 들어왔을 때 선택된 탭이 없는데 초기값이 일본으로 설정되어 있어 전체댓글은 볼 수없는 불편함이 있었다.

이 부분을 개선해보기로 하자!

우선 초기값을 빈값으로 설정해주었다.

// countrySlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = ''; // 여기!

const countrySlice = createSlice({
    name: 'country',
    initialState,
    reducers: {
        setCountry: (state, action) => {
            const activeCountry = action.payload;
            return activeCountry;
        },
    },
});

export const { setCountry } = countrySlice.actions;
export default countrySlice.reducer;

그리고 댓글창을 구현한 컴포넌트에서 클릭한 탭과 일치하는 댓글이 필터링 될 수 있도록 작성하였다.

const { data, isLoading, isSuccess, isError, error } = useQuery({
        queryKey: ['comments'],
        queryFn: fetchData,
        staleTime: 1000,
    });

    let selectCountry = data?.filter((value) => {
        return value.country === activeCountry;
    });

    if (activeCountry === '') {
        selectCountry = data;
    }

여기서 핵심은 아무것도 선택하지 않았을 때는 필터링된 데이터가 아닌 전체데이터가 보여져야 한다는 것이다!

그리고 이걸 토대로 화면에 그려주되 해당 탭에 댓글이 없을 경우에는 '등록된 댓글이 없습니다' 라는 문구를 함께 표시해주시 위해 삼항연산자로 작업해주었습니다.

  <StCommentSection>
                {selectCountry?.length !== 0 ? (
                    selectCountry?.map((comment) => {
                        const isAuthor = comment.userEmail === userEmail;
                        return (
                            <StComment key={comment.key}>
                                <StCommentEmailnDate>
                                    <StCommentLeftSec>
                                        <p>{comment.userEmail}</p>
                                        <StCommentEditnDel>
                                            <StCommentEditBtn
                                                $shouldDisplay={isAuthor}
                                                onClick={() =>
                                                    editBtnHndlr(
                                                        comment.id,
                                                        comment.contents,
                                                    )
                                                }
                                            >
                                                수정 |
                                            </StCommentEditBtn>
                                            <StCommentDelBtn
                                                $shouldDisplay={isAuthor}
                                                onClick={() => {
                                                    deleteMutate.mutate(
                                                        comment.id,
                                                    );
                                                }}
                                            >
                                                삭제
                                            </StCommentDelBtn>
                                        </StCommentEditnDel>
                                    </StCommentLeftSec>
                                    <p>
                                        {new Intl.DateTimeFormat('ko-KR', {
                                            dateStyle: 'full',
                                            timeStyle: 'short',
                                        }).format(comment.createdAt)}
                                    </p>
                                </StCommentEmailnDate>
                                <StCommentP>{comment.contents}</StCommentP>
                            </StComment>
                        );
                    })
                ) : (
                    <h2>등록된 댓글이 없습니다</h2>
                )}
            </StCommentSection>

이 부분의 코드를 수정하면서 바로 전 TIL에서 알게된 옵셔널체이닝이 도움이 많이되었다!!
.map() 에서 앞에 ? 를 붙여주지 않았을 때 계속 오류가 떴었기 때문이다..

✍🏻 회고

과제나 프로젝트를 진행하면서 한번씩 배우고 활용했던 내용들을 계속 사용하다보니 도움이 많이되고 반복학습을 통해 조금씩 손에 익혀지고 있는것 같기도 하다. 이래서 복습이 중요한가보다...
이걸 깨달았으니 내가 짠 코드가 아닌부분도 계속 보고 해석해보면서 그 다음번에 적용해볼 수 있도록 해야겠다!