Breadcrumb

• 웹사이트 내에서 어디에 있는지 알려주는 요소
  
• 사용예시
  
  

  현재 위치를 알려주는 요소

React 게시판의 페이징 처리 및 검색 기능 정리

1. 페이징 처리 핵심 개념

✅ pageNum을 URL에서 관리

• useSearchParams를 이용하여 URL에서 pageNum 값을 가져옴

const [params, setParams] = useSearchParams({
    pageNum: 1,
    condition: "",
    keyword: ""
});

//결과예시
/posts?pageNum=1

✅ move() 함수를 활용한 페이지 이동

• 페이지 이동 시 navigate()을 사용하여 URL 변경.
• 검색 조건이 있는 경우 URLSearchParams로 문자열을 생성하여 추가
• move() : 해당 pageNum 으로 이동 + 컨디션 & 키워드

const move = (pageNum) => {
    const query = new URLSearchParams(searchState).toString();
    navigate(`/posts?pageNum=${pageNum}${searchState.condition && "&" + query}`);
};

✅ 이전 / 다음 버튼 (Prev, Next)

• startPageNum === 1이면 Prev 버튼 비활성화.
• endPageNum === totalPageCount이면 Next 버튼 비활성화

<Pagination.Item 
    onClick={() => move(pageInfo.startPageNum - 1)} 
    disabled={pageInfo.startPageNum === 1}>
    Prev
</Pagination.Item>

<Pagination.Item 
    onClick={() => move(pageInfo.endPageNum + 1)} 
    disabled={pageInfo.endPageNum === pageInfo.totalPageCount}>
    Next
</Pagination.Item>

✅ 숫자 페이지 버튼

• 현재 페이지는 active 속성을 이용해 강조
• 페이지 배열을 기반으로 페이징 버튼 만들기

pageArray.map(item => 
    <Pagination.Item 
        onClick={() => move(item)} 
        key={item} 
        active={pageInfo.pageNum === item}>
        {item}
    </Pagination.Item>
)

검색 기능 핵심 개념

✅ 검색 조건과 키워드 상태 관리

• 검색어와 검색 조건을 searchState에서 관리

const [searchState, setSearchState] = useState({
    condition: "",
    keyword: ""
});

✅ 검색어 입력 시 searchState 업데이트

• 검색조건과 키워드를 상태값 관리 및 입력하는 값 실시간 반영
  

✅ 검색 버튼 클릭 시 1페이지부터 검색

• 검색 시 무조건 1페이지부터 결과를 보여줘야 함.

<button onClick={() => move(1)}>검색</button>

✅ 검색 초기화 (Reset 버튼)

• 검색어를 비우고 1페이지로 이동하여 전체 목록 다시 표시

const handleReset = () => {
    setSearchState({ condition: "", keyword: "" });
    move(1);
};

페이징과 검색을 효과적으로 관리하려면 URL 기반의 상태 관리가 필수적 useSearchParams와 navigate을 활용하여 페이지와 검색 상태를 동적으로 변경하는 것이 중요

새 글 작성하기

스마트에디터

• basic - static - smartEditor 폴더 복붙
  

• 처음에 textarea 를 초기화하여 smartEditor 로 설정
  

• 입력한 내용은 textarea 의 value 로 서버로 전송됨

• SmartEditor에 입력된 HTML 내용을 textarea의 value로 동기화
  

• 스마트에디터 컨트롤러와 React 의 attach_photo.js 의 uploadURL 맞추기
  

글 자세히 보기

• 검색 조건과 키워드가 있다면 동적으로 불러오기
• 빈 스트링이기에 "condition=&keyword=" 형식으로 붙여진다.
  

보완

1. @PathVariable

• Rest API 의 URL 에 변수가 들어갈 수 있는 그릇
  http://localhost:8080/api/user/**1234**
  https://music.bugs.co.kr/album/**4062464**