카테고리 없음

Next.Js Modal Props

영하10도 아아 2024. 11. 15. 16:55

 

모달 구현 중 props로 useState를 전달하는 과정에서 에러가 발생했다.

 

우선 컴포넌트 구조는 QnA상세페이지(부모) > 신고모달(자식) 이다.

 

부모 컴포넌트에서 신고 모달 사용 코드

 

신고 모달 컴포넌트 코드

 

 

const [isAnswer, setIsAnswer] = useState(false);
  const [isBookMark, setIsBookMark] = useState(false);
  
  //신고 모달 useState
  const [isReport, setIsReport] = useState(false);

  const toggleIsAnswer = () => {
    setIsAnswer(!isAnswer);
  }

  const toggleBookMark = () => {
    setIsBookMark(!isBookMark);
  }

//모달 On/Off 핸들러
  const toggleReport = () => {
    setIsReport(!isReport);
  }
  const postAnswer = () => {
    //답변 작성 api 작성
  }

 

 

처음엔 핸들러와 useState를 모달 컴포넌트에서 똑같이 작성해서 핸들링을 했지만, 이렇게 되면 부모 컴포넌트와 state가 공유가 안되기 때문에 모달에서 취소버튼으로 state를 false로 변경해도 부모 컴포넌트에선 아직 true이기 때문에 문제점이 있었다.

 

결국 두 컴포넌트의 state를 공유해서 사용해야 해서 props로 전달해서 사용하기로 했다.

 

분명 props 타입도 맞게 지정해줬고 onclick 이벤트로  setIsReport함수를 실행하고 파라미터로 false값을 넣어줬는데 에러가 발생했다.

 

 

에러 메세지는, 함수를 호출하는 과정에서 방식이 잘못되어 표현식이 잘못됐다는 내용이다.

 

보통은 이런 방식으로 props를 받게 되는데, 이렇게 되면 객체 형태로 props를 전달받게 된다.

그리고 onclick에서 사용하려고 하면 객체형태이기 때문에 setIsReport.setIsRepot(false) << 이렇게 사용하는 구조이다.

 

참조가 잘못되었기 때문에 표현식이 올바르지 않다는 에러가 발생하게 된 것이다.

 

그럼 props를 어떻게 받아야 되는데?

 

객체형태로 받으면 아까 말했던 것처럼 참조하는 과정에서 에러가 발생하는데, 이럴 땐 구조분해할당을 사용하여 props를 받으면 된다.

 

원래 받던 props 방식에서 {}로 감싸서 구조분해할당을 하여 받게되면 참조할 때 setIsReport(false)와 같은 방식으로 사용할 수 있게 된다.