별점 동적 출력에 대한 이해

후기를 작성하는 후기목록을 출력하는 과정에서 별점에대해 2가지의 상반되는 현상이 있었다!

 

후기작성의 논리는 다음과 같다.

 

1. 사용자에게 별점과 내용을 입력받는다.

2. DB INSERT 후 바로 SELECT ONE을 해서 Json 타입으로 VIEW에 제공한다.

3. Json타입으로 받은 데이터를 Js를 사용해 화면에 동적으로 출력해준다.

 

후기목록 출력은 다음과 같다.

 

1. 회원페이지로 이동시 가장 최근에 작성된 10개의 후기를 ReviewDTO 객체 리스트로 VIEW에 제공해준다.

2. 제공받은 데이터를 Core 태그를 사용해 화면에 출력해준다.

3. 이후 더보기 버튼을 누르면 DB에 접근해 다음 10개의 후기를 가져와 Json타입으로 받은 데이터를 Js를 사용해

화면에 동적으로 출력해준다.

 

후기를 작성할때 별점을 10개의 radio 버튼을 통해 0.5~ 5 점까지 radio checked true로 만들어
사용자에게 입력을받아 DB에 저장하는 형태이다.

 

DB저장은 순조롭게 잘 진행되었다! 
하지만...  사용자로부터 입력받은 별점을 바로 받아와 화면에 동적으로 출력해주는 과정에서 
동적으로 출력해준 별점은 checked true 상태가 잘 되어 나왔는데, 

이전에 작성해둔 별점radio의 checked가 false가 되어버렸다!
오랜시간 찾아보아도 답이 나오지않아 radio버튼으로 별점을 구현하는게 불가능하구나.. 싶었지만 결국 찾아낸 원인은

다음과 같다.

 

동적으로 라디오 버튼을 추가할 때, 기존에 설정된 라디오 버튼의 checked 속성이 초기화되는 현상이 발생한다

이는 새로운 HTML 요소를 추가하면서 페이지의 일부 DOM 요소가 새롭게 렌더링되기 때문. 즉, 라디오 버튼을 포함한 일부 DOM 요소가 새로운 상태로 갱신되면서 checked 속성이 기본값(대부분 false)으로 재설정되는 것이다!

콘텐츠를 추가하는 로직에 주의를 기울여 동적으로 라디오버튼을 추가할 때 기존의 DOM 요소들이 영향을 받지 않도록 할 수 있을지 모르지만 내가 찾은 해결 방안으로는 

1. 라디오버튼을 추가하기 전에 현재 페이지에 있는 모든 라디오 버튼이 checked true인것의 ID를 저장

2. 동 적으로 추가한 후, 저장해둔 ID를 순회하며 checked true 상태로 변경해서 라디오 버튼의 상태를 복원

이다.

 

이렇게 첫번째 문제는 해결!

 

두번쨰 문제는 더보기 클릭시 동적으로 출력되는 추가적인 별점 요소들이 checked true상태로 나오지 않는 문제였다.
원인은 다음과 같다.

 

라디오 버튼은 같은 그룹 내에서 하나만 선택될 수 있다.

따라서 같은 평가에 대한 라디오 버튼 그룹은 같은 이름(name)을 가져야 한다. 이렇게 해야 사용자가 여러 평가 중에서 하나를 선택할 때 각 그룹 내에서만 하나만 선택되도록 보장할 수 있다.

같은 평가에 대해 다른 이름을 가진 라디오 버튼을 동적으로 생성한게 추가적으로 별점을 가져오는 과정에서 오류를 일으킨 것 이라고 판단된다.... 또한 따옴표의 오류도 포함되어 있었다고 생각한다!

 

기존에 저장된 별점만큼 라디오 버튼을 동적으로 생성해서 체크 true를 해주는데 많은 어려움이 있었다!
그래도 지금은 정상작동해서 뿌듯하다~