글 수정하기
수정버튼을 누르면 입력버튼이 나타나고 내용을 입력한 다음에
확인버튼을 누르면 입력폼이 닫히면서 내용이 수정되는 기능
1. 수정버튼을 눌렀을 때 입력폼을 보여주기
ReviewList 컴포넌트에서 현재 수정중인 요소를 기억해두고
랜더링할 떄는 해당하는 요소만 입력폼으로 랜더링하는 것.
ReviewList 컴포넌트에다가
editingId라는 State를 만들어 초기값으로는 null를 넣어준다.
현재 수정중인 요소에 id를 저장할 값이다.
그리고 각 요소를 랜더링하는 부분에서
item의 id가 editingId인 경우에만 ReviewForm을 랜더링해준다.
그리고 수정버튼을 눌렀을 떄
setEditingId를 실행해주면된다.
ReviewListItem 컴포넌트에 onEdit이라는 prop으로 setEditingId를 넘겨주고
ReviewListItem에 수정버튼을 눌렀을 떄
onEdit prop으로 setEditingId를 넘겨줌으로싸 editingId가 수정할 Review가 된다.
ReviewListItem에서는 onEdit prop을 추가해준다음에
handleEditClick이라는 함수를 만들어서 onEdit를 item.id를 실행해준다.
그리고 수정버튼을 추가해준다.
확인해보면 해당 리뷰가 입력폼으로 잘 바뀐다.
입력폼의 값이 들어가 있도록 만들기
ReviewForm.js로 가서
리뷰를 수정할 떄 입력폼의 값이 들어가 있어야하므로ReviewForm 컴포넌트에 initialValues라는 prop을 추가해준다.
기존에 사용하던 대문자 INITIAL_VALUES라는 값은 prop에 기본 값으로 준다.
그리고 수정하는 경우에 취소 버튼이 필요하다.
onCancel이라는 prop도 추가한다.
취소버튼을 만들고 onCancel이 있을 때만 취소버튼이 보이도록
조건부 랜더링해준다.
ReviewList 컴포넌트에서는 initalValue값을 만들어서 prop으로 내려준다
그리고 handleCancle 함수를 만들어서 editingId 값을 null값으로 변경해준다
handleCancle은 onCancle prop으로 내려준다.
수정 버튼을 누르면 값이 잘 채워져있고
취소 버튼을 누르면 원래대로 잘 돌아가는 것을 확인할 수 있다.
하지만 이미지 미리보기가 동작하지 않는다.
사실 item에는 imgFile이라는 파일 객체는 없고
이미 업로드된 주소값인 imgUrl이라는 프로퍼티만 있다.
그래서 이 값을 미리보기에 사용해야한다.
imgUrl값을 추가로 distructuring 하고
ReviewForm 컴포넌트에 initialPreview라는 prop으로 내려준다.그리고 ReviewForm.js에서는 initialPreview prop을 받아서
이것을 그대로 FileInput 컴포넌트에 내려준다.(위에 캡처 확인)
그리고 FileInput 컴포넌트로 가서 initialPreview prop을 추가하고
이것을 preview에 초기값으로 넣어준다.
마찬가지로 preview를 초기화하는 부분에서도 initialPreview를 넣어준다.
이렇게 하면 파일을 선택하지 않았거나 선택했다가 삭제하는 경우에
initialPreview에 이미지를 보여줄 것이다.initialPreview값이 바뀔때마다 useEffect실행도 달라져야 하는데
그래서 initialPreview값도 디펜던시 리스트에 넣어준다.
확인해보면
수정버튼을 눌렀을 때 이미지 미리보기가 잘 보이고
파일을 선택했다가 다시 취소했을 때도 이전 이미지 미리보기가 잘 보인다.
