React 리액트 최신순, 인기순(조회수)별로 게시글 조회하는 법

728x90

우리 팀이 만든 Homecoming Day 모양이다!

저렇게 최신순, 인기순으로 select 조회를 해주고 싶을 때 코드를 정리해보려고 한다.

구글링에 아직 미숙한 건지, 필요한 자료를 찾는 시간이 오래 걸릴 때가 있다 ㅠㅠ

완성했던 코드 잘 기록해보기!

🔷 일단 전체 코드를 기록하고 아래에 순서를 차근차근 정리했다.

const Calendar = () => {

  const dispatch = useDispatch();
  const { calendars } = useSelector((state) => state.calendars);
  const { calendarPopular } = useSelector((state) => state.calendars);
  const [select, setSelect] = useState('new');

  useEffect(()=>{
    dispatch(__getReset())
  },[])

  useEffect(() => {
    dispatch(__getMyPage())
    dispatch(__getCalendar());
    dispatch(__getPopularCalendar());
  }, [dispatch]);

  const handleSelect = (e) => {
    setSelect(e.target.value);
  };

  return (
    <StHelpContainer>
      <StBannerWrap>
        <StBanner />
      </StBannerWrap>
      <StHelpWrap>
      <StSelect name='state' onChange={handleSelect}>
          <option value='new'>최신순</option>
          <option value='popular'>인기순</option>
        </StSelect>
        <StHelpList>
          <>
          {select === "new"&&calendars && calendars.length > 0 ? (
            <div>
            {calendars && calendars.slice(0).map((calendar) => (
              <CalendarCard key={calendar.articleId} id={calendar.articleId} calendar={calendar} />
            ))}
            </div>
          ) : 
          
          select === "popular"&& calendarPopular && calendarPopular.length > 0 ?
          (<div>
           {calendarPopular && calendarPopular.slice(0).map((calendar) => (
             <CalendarCard key={calendar.articleId} id={calendar.articleId} calendar={calendar} />
           ))}
         </div>) :
          (
            <StNoneData>
                <StNoneDataImg></StNoneDataImg>
                <p>아직 게시글이 없습니다</p>
                 <div>첫 게시글을 작성해주세요</div>
              </StNoneData>
          )}
          </>
        </StHelpList>
      </StHelpWrap>
    </StHelpContainer>
  );
};

export default React.memo(Calendar);

1️⃣ 먼저, BackEnd 에서 데이터를 해당 최신순, 인기순(조회수)별로 넘겨주도록 협업을 해야 한다.

2️⃣ select 선택할 수 있는 option 값을 준다.

<StSelect name='state' onChange={handleSelect}>
  <option value='new'>최신순</option>
  <option value='popular'>인기순</option>
</StSelect>

최신순이니까 value는 new로, 인기순이니까 value는 popular로 주기

3️⃣ 바로 위에 handleSelect 함수를 주기

const [select, setSelect] = useState('new');

const handleSelect = (e) => {
	setSelect(e.target.value);
};

useState("new") 로 설정해서, option 이 화면에 보여질 때 최신순이 초기값이도록 설정

4️⃣ 최신순, 인기순(조회수)별로 받은 데이터를 useSelector를 통해 꺼내주기

const { calendars } = useSelector((state) => state.calendars);
const { calendarPopular } = useSelector((state) => state.calendars);

5️⃣ option에 value 값을 select해서 데이터 map 돌리기!

<StHelpList>
      <>
        {select === "new" && calendars && calendars.length > 0 ? (
          <div>
            {calendars && calendars.slice(0).map((calendar) => (
              <CalendarCard key={calendar.articleId} id={calendar.articleId} calendar={calendar} />
            ))}
          </div>
        ) :

          select === "popular" && calendarPopular && calendarPopular.length > 0 ?
            (<div>
              {calendarPopular && calendarPopular.slice(0).map((calendar) => (
                <CalendarCard key={calendar.articleId} id={calendar.articleId} calendar={calendar} />
              ))}
            </div>) :
            (
              <StNoneData>
                <StNoneDataImg></StNoneDataImg>
                <p>아직 게시글이 없습니다</p>
                <div>첫 게시글을 작성해주세요</div>
              </StNoneData>
            )}
      </>
    </StHelpList>

select = "new" 이런식으로 option value 값으로 적어주고

length > 0 , 0보다 클 때로 삼항연산자를 넣어서 map 을 돌려주면 된다!

6️⃣ "아직 게시글이 없습니다" 라고 되어 있는 부분은 데이터 없을 때, 모양을 나타내고 싶어서 한 것

삼항연산자를 이용해서 데이터가 없을 때의 게시글이 없다고 작성해주면, 그냥 비어있는 것보다 유저한테 더 좋은 경험을 줄 수 있는 것 같다.

7️⃣ useEffect 해주기

useEffect(() => {
    dispatch(__getMyPage())
    dispatch(__getCalendar());
    dispatch(__getPopularCalendar());
}, [dispatch]);

getMyPage는 mypage 정보 끌고 오는 거라서 최신순, 인기순(조회수)는 getCalendar, getPopularCalendar를 보면 된다.

의존성 배열에 dispatch를 넣어서 useEffect해주면 끝!

8️⃣ 모듈은 axios로 작성

export const __getCalendar = createAsyncThunk(
  'calendars/getCalendar',
  async (payload, thunkAPI) => {
    try {
      const data = await axios({
        method: 'get',
        url: `${BASE_URL}/article/calendar`,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${getCookie('accessToken')}`,
        },
      });
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

이렇게까지 하면 option을 select할 때 바로바로 데이터가 조회된다❤️