React 게시판 기능 완벽 정리: 페이지 이동, 검색, 수정, 삭제, JWT 인증까지!

두부링·2025년 3월 18일

Spring

목록 보기

22/24

글 페이지 이동 및 검색 기능

같은 페이지 내에서의 스크롤 이동
페이지에 책갈피
" # " 뒤는 아이디로 그곳으로 이동하라

페이지 이동

useSearchParams , params.get 으로 파라미터 관리를 해야하는 점

검색기능

컨디션 , 키워드 파라미터를 관리

userDetails

useSelector()를 사용하여 Redux에서 로그인한 사용자 정보 가져오기

로그인 유저랑 작성자가 같으면 수정 삭제 버튼 나오게끔

dangerouslySetInnerHTML을 사용한 HTML 출력

게시글의 내용을 html 요소로 보여주게끔 함

ConfirmModal을 사용하여 삭제 기능 구현

삭제 버튼을 누르면 모달을 보여주고 예를 누르면 서버에 삭제 요청

이전글 혹은 다음글이 있다면 버튼이 나오게끔
검색조건과 키워드에 맞는 이전 다음글이 나오게 파람 관리

{state.prevNum !== 0 ? <Link to={`/posts/${state.prevNum}${params.get("condition") && "?" + new URLSearchParams(params).toString() }`}>이전글</Link> : "" }
{state.nextNum !== 0 ? <Link to={`/posts/${state.nextNum}${params.get("condition") && "?" + new URLSearchParams(params).toString() }`}>다음글</Link> : "" }

condition과 keyword는 어떻게 전달될까?

글 목록 페이지에서 검색조건과 키워드로 검색하면 관련 list 가 보이는 페이지로 이동
상세 보기를 누르면 상세 페이지(/posts/:num)로 이동하면서, 검색 조건도 같이 전달됨
상세보기 클릭시 파람(검색조건과 키워드) 가 변경된다.
상세보기 페이지에서 검색조건과 키워드가 공유되어진다.

알람 모달 설정

AlertModal() 요소를 재료와 함께 생성
요소를 사용한 곳에 import 해서 재료 채워주기

커스텀 css 적용하기

커스텀 css 파일을 import 하고 cx(= binder)에 담고 요소에서 어떤 css 인지 선택하기

private 한 css 의 파일 이름

module.css 로 작성해야 함

https://velog.io/@grh0916/310#pirvate-%ED%95%9C-css-%EC%83%9D%EC%84%B1%EB%B0%A9%EB%B2%95

jwt-decode

json 웹 토큰 디코딩 라이브러리
토큰을 디코딩 하는 과정...변경....

글 수정 기능

경로에 동적 파라미터 추가

React 경로의 : 은 동적 파라미터값을 추가할 수 있다.
경로에 맞게 중간에 num 값 넣기

동적 파라미터 추가 시 router 의 path ": 파라미터명 " 작성하기

비동기 (asnyc , await)

비동기 함수로 해당 글의 정보 받아오기
싱글 스레드로 흐름을 일단 넘김
async , await 사용해서 비동기 동작으로 데이터 불러오기

동작 여러개를 동시에 실행할 수 있다의 의미

//예시코드
const [postRes, commentsRes] = await Promise.all([
    axios.get(`/posts/${postId}`),   // 게시글 데이터 요청
    axios.get(`/posts/${postId}/comments`) // 댓글 데이터 요청
]);

스마트 에디터

스마트에디터를 렌더링 시 가지고 오기위해서는 한 번 초기화해야 한다.
밑의 2개의 코드를 자동적으로 생각하기
서버에 요청할 때는 textarea 의 value 로 변경하기
스마트에디터의 내용 = html 요소이기에 변경해야 함

스마티에디터 1. 렌더링 시 초기화 작업 2. 서버 전송 시 textarea 의 value 로 변경

수정값 끌고오기 및 원상복구(useRef)

input 요소 혹은 textarea 에 직접 접근이 가능함
useRef 를 배당하면 렌더링 하지 않아도 값을 가지고 올 수 있다.
ref 객체 생성 후에 input 혹은 textarea 에 배당하면 current.value 로 내용을 가지고 올 수도 내용을 담을 수도 있다.

input 요소에 ref 라는 값을 제어할 수 있는 공간이 생겼다.