inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 게시글 필터링 관련해서 질문이있습니다.

229

귀여운 수달

작성한 질문수 2

0

안녕하세요. 현재 여러개의 select - option으로 게시된 게시글을 필터링을 해보려고 하고 있고 잘 작동하는데 코드가 너무 지저분합니다. 혹시 좀더 효율적으로 짤 수 있는 팁주실수 있으면 감사하겠습니다. ㅠㅠ

 

const coursePosts = useSelector((state) => state.coursePost.coursePosts);
    const [group, setGroup] = useState("all");
    const [subject, setSubject] = useState("all");
    const [level, setLevel] = useState("all");

    const fillteredCoursePosts = coursePosts.filter((post) =>
    ( //문제의 부분 start
        group === 'all' && subject === 'all' && level === "all"
            ? post
            : subject === 'all' && level === "all"
                ? (post.group === group)
                : group === 'all' && level === "all"
                    ? (post.subject === subject)
                    : group === 'all' && subject === "all"
                        ? (post.level === level)
                        : group === "all"
                            ? (post.subject === subject) && (post.level === level)
                            : subject === "all"
                                ? (post.group === group) && (post.level === level)
                                : level === "all"
                                    ? (post.group === group) && (post.subject === subject)
                                    : (post.group === group) && (post.subject === subject) && (post.level === level)
    )
    //문제의 부분 End
)
    const handleGroupChange = (e) => {
        setGroup(e.target.value);
    }

    const handleSubjectChange = (e) => {
        setSubject(e.target.value);
    }

    const handleLevelChange = (e) => {
        setLevel(e.target.value);
    }

    return (
        <>
            <main className="width_content"> 
                <div className={styles.course_box_wrap}>
                    <div className={styles.filter_header}>
                        <div className={styles.ft_select}>
                            <select onChange={handleGroupChange}>
                                <option value="all">ALL</option>
                                <option value="Group1">Group 1</option>
                                <option value="Group2">Group 2</option>
                                <option value="Group3">Group 3</option>
                            </select>

                            <select onChange={handleSubjectChange}>
                                <option value="all">ALL</option>
                                <option value="English">English</option>
                                <option value="Korean">Korean</option>
                            </select>

                            <select onChange={handleLevelChange}>
                                <option value="all">ALL</option>
                                <option value="Core">Core</option>
                                <option value="test1">Embed</option>
                                <option value="test2">Test</option>
                            </select>
                        </div>
                   </div>
               </div>
           </main>
</>
)
}

react redux node.js express next.js

답변 1

0

제로초(조현영)

coursePosts.filter((v) => {
  const groupCondition = group === 'all' ? true : v.group === group;
  const subjectCondition = subject === 'all' ? true : v.subject === subject;
  const levelCondition = level === 'all' ? true : v.level === level;
  return groupCondition && subjectCondition && levelCondition;
});

알고리즘 공부 많이 하셔야겠습니다. ㅎㅎ

0

귀여운 수달

감사합니다!

넥스트 버젼 질문

0

91

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

199

1

특정 페이지 접근을 막고 싶을 때

0

117

2

createGlobalStyle의 위치와 영향범위

0

104

2

인라인 스타일 리렌더링 관련

0

99

2

vsc 에서 npm init 설치시 오류

0

159

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

164

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

360

1

url 오류 질문있습니다

0

218

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

394

1

sudo certbot --nginx 에러

0

1298

2

Minified React error 콘솔에러 (hydrate)

0

483

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

257

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

341

1

npm run build 에러

0

526

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

351

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

291

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

253

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

207

1