inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

227

귀여운 수달

작성한 질문수 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

78

2

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

0

90

1

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

0

176

1

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

0

103

2

createGlobalStyle의 위치와 영향범위

0

96

2

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

0

92

2

vsc 에서 npm init 설치시 오류

0

148

2

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

0

160

1

화면 새로고침 문의

0

122

1

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

0

154

2

Next 14 사용해도 될까요?

0

452

1

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

0

349

1

url 오류 질문있습니다

0

211

1

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

0

375

1

sudo certbot --nginx 에러

0

1279

2

Minified React error 콘솔에러 (hydrate)

0

470

1

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

0

247

1

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

0

329

1

npm run build 에러

0

519

1

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

0

382

1

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

0

338

2

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

0

289

1

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

0

240

2

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

0

202

1