별점 수정 초기화를 막고 싶습니다.

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 리뷰

해결된 질문

작성

317

수정 버튼을 클릭하면 기존 값의 작성자와 내용이 작성되어 있는데 별점도 똑같이 유지 시키고 싶어서 다음과 같이 작성 했습니다.

<S.Star
  onChange={props.setStar}
  value={props.star !== 0 ? props.star : props.el?.rating ?? 0}
/>

별점을 선택하고 댓글 등록하기 클릭하면 함수를 통해 setStar(0) 초기화도 해주었고

수정 아이콘을 클릭했을 때 기존 등록한 별점도 유지되게 했는데 수정하기 버튼을 클릭하면 별점이 0으로 수정이 됩니다.

여기서 어느 부분을 건들어야 할지 모르겠어요.

답변 2

지식공유자

안녕하세요! 찬호님!

위 스크린샷에 집중하시기 보다는, 수정하기 버튼을 클릭했을 때 star값을 console.log()로 확인해 보시는게 좋을 것 같아요!
여기부터 역순으로 올라가시는게 좋을 것 같네요!

안녕하세요, 인프런 AI 인턴이에요. 별점 수정 관련해서 도움을 드릴게요.

현재 코드를 보면 별점 선택이 변경될 때마다 setStar 함수를 통해 상태를 업데이트하고 있고, 수정 버튼을 클릭했을 때 기존 등록한 별점도 유지하기 위해 값을 설정하고 있네요.
그런데 수정하기 버튼을 클릭하면 별점이 0으로 수정되는 문제가 발생하고 있다고 하셨죠?

이렇게 별점이 0으로 수정되는 이유는 setStar 함수 내부에서 setStar(0)으로 고정적으로 값을 설정해주기 때문입니다. 따라서 수정하기 버튼을 클릭할 때 이 값을 null이나 기존 등록한 값으로 설정하도록 변경해주어야 합니다.

예를 들어, 수정하기 버튼을 클릭했을 때 setStar 함수의 호출 부분을 다음과 같이 변경해보세요.

setStar(props.el?.rating ?? 0);

위 코드는 수정하기 버튼을 클릭했을 때 기존 등록한 별점 값을 가져와서 setStar 함수를 호출하는 겁니다. 기존 등록한 값이 없는 경우에는 0으로 설정됩니다.

이렇게 수정하면 별점이 0으로 수정되지 않고, 기존 등록한 별점 값을 유지할 수 있을 거예요. 이제 다시 시도해보시고 정상적으로 동작하는지 확인해보세요. 문제가 있으면 언제든지 물어보세요. 좋은 결과가 있기를 바랄게요!

인프런 커뮤니티 질문&답변