[React] 블로그 웹페이지 제작 실습 -4 (영화 장르 및 평점별 필터링)

장르 및 평점 별로 필터링 진행(드롭다운 목록 이용)

 

1. 데이터 상태를 관리할 수 있도록 useState 사용

    // 기분 필터링용
    const [mood, setMood] = useState("All Moods");
    // 점수 필터링용
    const [score, setScore] = useState("All");

 

2. 드롭다운 목록 만들기 

이 때 드롭다운 목록의 값(value={mood})로 받아서 드롭다운에 이벤트가 발생할 때 handleMoodChange 함수를 호출한다.

 <div className='filter-bar'>
                <div className='filter-slot'>
                    <label>기분</label>
                    <select className='filter-dropdown' value={mood} onChange={handleMoodChange}>
                        <option>All Moods</option>
                        <option>happy</option>
                        <option>sad</option>
                        <option>tired</option>
                        <option>angry</option>
                        <option>anxious</option>
                        <option>neutral</option>
                    </select>
                </div>

                <div className='filter-slot'>
                    <label>점수</label>
                    <select className='filter-dropdown' value={score} onChange={handleScoreChange}>
                        <option>All</option>
                        <option>Good</option>
                        <option>Ok</option>
                        <option>Bad</option>
                    </select>
                </div>
            </div>

 

3. 데이터 상태 업데이트

onChange 이벤트 핸들러에 의해 아래 함수가 호출되면 useState에서 관리하는 mood, score 값 업데이트 진행.

    // 콤보박스에서 mood 값 받기
    const handleMoodChange = (e) => {
        setMood(e.target.value)
    }

    // 콤보박스에서 평점 값 받기
    const handleScoreChange = (e) => {
        setScore(e.target.value)
    }

 

4. 필터링

기분에 대한 필터링을 먼저 진행한 후 순차적으로 점수 및 제목에 대한 필터링 진행

    // 감정 상태  필터링
    const matchesMood = (blog, mood) => {
        return mood === 'All Moods' || blog.mood.toLowerCase() === mood.toLowerCase();
    }

     // 영화 제목 필터링
    const matchesSearchTerm = (blog, searchTerm) => {
        return blog.title.toLowerCase().includes(searchTerm.toLowerCase())
    }
    
    // 기분 점수 필터링
    const matchesScore = (blog, score) => {
        let check_rating;
        if (blog.score > 8) {
            check_rating = 'Good'
        } else if (blog.score <= 8 && blog.score >= 5) {
            check_rating = 'Ok'
        } else if (blog.score < 5) {
            check_rating = 'Bad'
        }
        return score === 'All' || check_rating.toLowerCase() === score.toLowerCase()
    }

    // 블로그 필터링
    const filteredBlogs = blogs.filter(blog =>
        matchesMood(blog, mood) &&
        matchesScore(blog, score) &&
        matchesSearchTerm(blog, searchTerm)
    )

 

5.결과

Mood는 happy, 기분점수는 Ok인 블로그 글 필터링

'