-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
안녕하세요. 게시글 필터링 관련해서 질문이있습니다.
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>
</>
)
}
답변을 작성해보세요.
0
조현영
지식공유자2023.10.04
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;
});
알고리즘 공부 많이 하셔야겠습니다. ㅎㅎ
답변 1