후기 아이템의 평점(1-10점)을 클릭하고, 후기 내용을 기록하여 관리하는 앱

• React
• Context API
• Axios
• FAKE REST API
• LocalStorage
• Styled Components

• 구현
  • API 통신
  • 평점, 후기 등록
  • 평점, 후기 수정
  • 평점, 후기 삭제
  • 평점, 후기 저장
  • UI
• 트러블 슈팅
• 학습한 내용

• FAKE REST API를 get 방식으로 commets JSON 데이터를 가공해 기존 예시 데이터로 출력
• 평점은 random()으로 1-10점 이내 숫자로 후기 리스트 생성
• useReducer로 관리하는 data의 length로 후기 총 개수 출력

• 평점, 후기 아이템, 후기 내용 작성 후 등록
• 평점은 ReviewRating 컴포넌트에서 input type을 radio로 한 후 해당 숫자에 해당하는 key를 props으로 전달
• Context API로 전역적으로 공급한 onCreate 함수를 ReviewCreate 컴포넌트에서 useContext를 이용해 사용
• 'SEND' 버튼의 클릭 시 평점, 후기 아이템, 후기 내용을 가지고 onCreate가 실행되게 함

평점, 후기 작성	평점, 후기 생성 확인

• confirm창으로 후기 생성 확인 메시지
• 'SEND'버튼 누르면 onClick 이벤트 발생 후 onCreate 함수 호출해 데이터 생성된 다음 후기 리스트에 출력
• 날짜는 후기 작성 시점을 기준으로 출력

후기 내용 수정	후기 내용 수정 확인

• 평점 수정 및 후기 내용 수정 가능
• useState의 boolean으로 수정 버튼 클릭 유무를 관리해 삼항연산자를 통해 화면 출력
• 수정 버튼 클릭 시 autofocus로 후기 내용란을 사용자에게 알림
• 후기 내용 작성하는 textarea의 onChange로 후기 내용을 state에 업데이트
• Context로 공급받은 onEdit 함수를 호출해 수정 내용 반영 후 호출

• 수정 버튼을 누르지 않고도 +/- 버튼으로 평점만 따로 수정 가능
• +/- 버튼에 현재 평점을 가져온 후 연산하는 onClick 이벤트 설정
• Context로 공급받은 onEdit을 이용해 평점 수정 반영

평점, 후기 삭제	평점, 후기 삭제 확인

• 삭제 버튼 클릭 시 Context로 공급받은 onRemove 함수 실행
• onRemove 실행 시 해당 후기 id를 제외한 요소를 모아 새로운 배열로 반환해 화면 출력

• LocalStorage를 통해 review key를 통해 후기의 평점과 내용 관리
• Context에서 dispatch에서 onRemove를 조회해 사용
• reducer에서 action을 일으켜 newData로 반영한 객체를 LocalStorage에 JSON 문자열로 변환해 review key의 값으로 저장

• Styled Components 이용
  • Global Style로 관리
  • props 받아와 스타일 적용

문제

• API가 데이터를 가져 오기 전 렌더가 돼 undefined 데이터가 후기 목록에 출력되는 현상

해결

• 해당 데이터의 id가 undefined나 null이 아닌 경우에만 후기 목록을 반환하도록 단축 평가 논리 계산법을 이용해 해결

문제

• 후기 내용을 수정하는 함수를 이미 구현했는데, 평점만 따로 수정하고 싶을 때 새로운 함수를 작성 시 코드가 중복되는 현상

해결

• target의 name, value값을 전달받아 하나의 함수(changeReview)로 구현

문제

• input의 radio를 통해 평점 하나만 클릭할 수 있게 하였더니, radio 좁은 해당 부분만 클릭이 인식되는 현상

해결

• input의 radio 클릭은 opacity로 보이지 않게 처리하고, label의 범위를 평점 요소만큼으로 설정

문제

• 원래 평점에서 + 버튼 클릭하면 +10이 연산된 후 +1씩 연산되는 오류

해결

• 평점을 숫자가 아닌 문자로 인식하여 생긴 오류로 버튼으로 전달받은 평점을 parseInt로 숫자로 변환 후 +/- 연산해 해결

• Falsy한 값은 undefined, null, 0, '', NaN
• Falsy한 값에 앞에 느낌표를 붙일 경우 Truthy한 값이 됨
• 느낌표 2개도 사용 가능

• 특정 값이 유효할때에만 어떤 값을 조회하고자 할 때 유용
• A && B 연산자의 경우
  • A가 Truthy 한 값이라면, 결과값은 B
  • A가 Falsy 한 값이라면, 결과값은 A
• A || B 연산자의 경우
  • A가 Truthy한 값이라면, 결과값은 A
  • A가 Falsy한 값이라면, 결과값은 B