React) 스크랩 - 스크랩 상태 유지하기 / axios로 스크랩 구현 : state, props

 

프로젝트 진행 중...

스크랩 기능을 만들어야 했다.

어제 성공한 스크랩 기능은

얼핏 봐서는 완벽해보이지만... 팝업 창을 껐다 켜면 상태 유지 안됨...ㅎㅎㅎㅎㅎㅎ

어쩌지? 하다가 생각해낸 방법.

 

부모 컴포넌트에서 자식 컴포넌트를 관리하자!

 

컴포넌트 구조는 다음과 같다.

Mentoring.js (부모 컴포넌트)

MentorApply.js (자식 컴포넌트)

 

부모 컴포넌트

1. 북마크 상태를 관리할 boolean 타입 변수를 하나 만든다.

2. 변수의 상태를 바꿔줄 set 함수를 같이 설정한다. => 자연스럽게 useState를 쓰게 되겠죠?

3. 클릭했을 때 bmk의 상태를 바꾸기 위해 클릭 이벤트 함수도 만들어주자.

이제 이 bmk 값과 클릭 이벤트 함수를 자식에게 props로 전달해주면 된다.

 

togglePopup은 팝업창 열기/닫기를 위한 함수,

geul, current는 상세 글 조회를 위한 부분이라 넘어가고,

onClickBmk와 bmk 주목!

 

Mentoring.js 코드

  const [bmk, setBmk] = useState(false);
   const onClickBmk = () => {
    setBmk(current => !current);
  };
  
  { showPopup && <MentorApply togglePopup={togglePopup}  geul={geul} current={current} onClickBmk={onClickBmk} bmk={bmk} />}

 

이제 자식 컴포넌트를 볼 차례!

나는 북마크 상태 변경 + 서버에 데이터 전송 /  삭제 요청을 한번에 해야 해서 클릭 이벤트가 2개 필요한 상황이었다..

 

그런데 onClick을 두번 쓸 수는 없으니...

PlusBMK => 스크랩 DB에 추가 요청하는 함수

DeleteBMK => 스크랩 DB에서 삭제 요청하는 함수

이 함수들 안에 onClickBmk()를 넣어주었다.

 

axios 라이브러리를 사용하여 통신했고,

추가할 땐 post, 삭제할 때는 delete를 사용했다.

 

MentorApply.js

 function MentoApply({ togglePopup, current, bmk, onClickBmk}) {
 ...
 
 const PlusBMK = async (e) => {
    try {        
        const response = await axios.post('url', {
          m_no: m_no
        })
        if(response.data.result === "SUCCESS"){
          onClickBmk();
          alert('스크랩 되었습니다.');
          e.preventDefault();
        }
    }
    catch (err) {
      console.log("Bookmark plus error: ",err);
    }
  }

  const DeleteBMK = async (e) => {
    try {
        const response = await axios.delete('url');
        if(response.data.result === "SUCCESS"){
          onClickBmk();
          alert('스크랩이 취소되었습니다.');
          e.preventDefault();
        }
    }
    catch (err) {
      console.log("Bookmark delete rror: ",err);
    }
  }

...

return (
 <div>
 	...
 	{ bmk ? <BsBookmarkStarFill size="30" className={styles.book} onClick={DeleteBMK} /> : <BsBookmarkStar size="30" className={styles.book} onClick={PlusBMK} /> }
 </div>
 
 )
 
 }
 
 export default MentorApply;

 

부모 값을 전달하여 쓰면

팝업창을 껐다가 켜도 상태가 유지된다.  ^_^

실행 영상

 

 

끝! 나같이 삽질하는 사람이 없길 바라며..^^

도움이 되셨다면 좋아요 한번만 눌러주세요...!ㅎㅎ