[TIL] 내일배움캠프 73일차 - 리액트에서 Param 넘기기

오늘의 학습 키워드📚

리액트에서 스프링으로 Params 넘기기

    @GetMapping("/search")
    public ResponseEntity<CommunityPostListResponse> searchCommunityPost(
        @ModelAttribute CommunityPostListRequest request) {
        return ResponseEntity.ok(communityPostService.searchCommunityPost(request));
    }

커뮤니티 글을 조회하는 API이다.
ModelAttribute로 동적으로 Params를 받는데 페이지네이션이 돼야 하기 때문에 page에 관한 정보와 검색어, 카테고리 등에 대한 정보가 들어간다.

리액트에서 동적으로 Params를 받은 Json 형태 객체를 api 메소드 파라미터로 넘겨주고 axios로 호출할 때 중괄호로 파라미터를 감싸서 호출하면 된다.

export const searchPosts = async (searchParams) => {
    const {
        page,
        pageSize,
        column,
        title,
        contents,
        keyword,
        categoryName,
    } = searchParams;

    const params = {};

    if (page) {
        params.page = page;
    }
    if (pageSize) {
        params.pageSize = pageSize;
    }
    if (column) {
        params.column = column;
    }
    if (title) {
        params.title = title;
    }
    if (contents) {
        params.contents = contents;
    }
    if (keyword) {
        params.keyword = keyword;
    }
    if (categoryName) {
        params.categoryName = categoryName;
    }

    return apiClient.get(startUrl + `/communityposts/search`, {params});
};

RequestParam은 null이 들어가도 되기 때문에 입력받은 값만 파라미터로 구성해 넘겨주었다.

---

오늘의 회고💬

리액트의 연속이다....

 

내일의 계획📜

커뮤니티 부분 완료하면 거래 게시판도 금방 완료할 수 있다고 생각한다.