• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

23.10.04 01:05 작성 조회수 127

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>
</>
)
}

답변 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;
});

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

감사합니다!