☆☆☆진행 순서☆☆☆
-
메인페이지, 상세페이지 css 제대로 구현
<메인페이지>
<상세페이지>
-
상세페이지 수정, 삭제 버튼 기능 구현
<수정 기능>
isEditing, editedContent를 useState로 따로 만들어 놓은 이유
isEditing
const [isEditing, setIsEditing] = useState(false);- 현재 페이지가 편집 모드인지 아닌지 판별해주는 Boolean 상태
- 초기 값이 false이기 때문에 최초엔 편집 모드가 아님
- 수정 버튼 클릭 시 true로 바뀌게 해서 편집 모드로 전환되게 만들어 줌
editedContent
const [editedContent, setEditedContent] = useState("");- 현재 편집 중인 content 내용을 저장한 상태
- isEditing이 true일때 textarea에 입력된 내용은 editedContent에 저장됨
- 수정완료 버튼 클릭하면 편지 내용이 업데이트 됨
handleEdit 함수
const handleEdit = () => {
setIsEditing(true);
setEditedContent(findLetters.content);
};handleEdit 함수를 수정 버튼에 넣어서 사용하면 isEditing이 true가 되고, editedContent값에 findLetters 즉 id값을 통해 찾은 content값을 넣어주게 된다.
그 값을 근거로 ? : 문을 통해 textarea쪽에 내용 수정을 하면 그게 출력되게 도와주고, 내용 수정이 없다면 최초값 그대로 출력된다.
handleSaveEdit 함수
if (editedContent.trim() === findLetters.content.trim()) {
alert("아무런 수정사항이 없습니다.");
setIsEditing(false);
} else {
const updatedLetters = data.letters.map((letter) =>
letter.id === params.id ? { ...letter, content: editedContent } : letter
);
data.setLetters(updatedLetters);
setIsEditing(false);
navigate("/");
}
};수정시, 수정한 content와 수정전 content 값이 정확히 일치한다면, '아무런 수정사항이 없습니다' 알림창이 뜨고, 그게 아니라면 수정된 content를 맵핑해서 출력시킨다.
그 후 업데이트된 팬레터를 출력시키고, 수정버튼을 누르기 이전 상태로 돌아가게 해주며, navigate를 통해 메인페이지로 돌아가게 세팅해준다.
<삭제 기능>
handleDelete 함수
const handleDelete = () => {
//확인 메세지
const confirmDelete = window.confirm("정말로 삭제하시겠습니까?");
if (confirmDelete) {
const updatedLetters = data.letters.filter(
(letter) => letter.id !== params.id
);
data.setLetters(updatedLetters);
navigate("/");
}
};기본적으로 삭제버튼을 누르면 '정말로 삭제하시겠습니까?' 를 확인받을 수 있게 window.confirm을 사용
하였다
window.confirm
이는 웹 브러우저에서 제공되는 js 내장 함수이자, 사용자에게 '확인' 또는 '취소' 버튼이 있는 모달 대화 상자를 보여주는데, 버튼의 값에 따라 'true' 또는 'false'가 반환된다.
이후 버튼을 눌렀을 때 어떤 기능이 구현될지는 적지 않았기 때문에, if문을 통해 만약 사용자가 선택한 버튼 즉 true를 눌렀다면, filter 매서드를 통해 거른 id값과 params.id값을 불일치 시켜서 화면에서 보이지 않게 만든다(삭제한다)
params
React Router에서 사용되는 객체로, URL 경로에서 동적인 부분을 추출할 때 사용
즉 /:id를 통해 상세페이지를 새로 만들어주는데 도움을 주는게 params인데, 그 값을 이용해 화면을 띄우기 때문에 id값 비교할 때 사용
그 후 letters값을 변동되어 보이지 않는 값을 넣어주고, navigate를 통해 메인페이지로 돌아가게 된다.
- context api로 리펙토링
context에서 막혔던 부분
전역에 선언할 createContext를 FamilyContext로 선언한 후, 자식컴포넌트로 사용할 곳에만
const data = useContext(FamilyContext)이걸로 그 값들을 prop drilling없이 원하는 컴포넌트에서만 값을 내려줄 수 있었는데
그 과정에서 중간쯤 위치하는 컴포넌트에서 하위 컴포넌트로 보낼때 오류가 생겼었다.
원인은 똑같이 FamilyContext 변수명으로 내려보냈기 때문인데,
다른 변수명으로 그 아래 자식 컴포넌트로 값을 내려줬다면, error없이 잘 내려졌을 것이다.
앞으로 해야할 부분
redux로 리팩터링
느낀점
확실히 어떻게든 도움을 받아서 구현을 하고 그걸 복습하려고 생각하는게 훨씬 시간절약도 되고 아느정도 길이 뚫려있다보니 그걸 빌미로 따라하는게 도움이 많이 된다고 판단되어 주변 사람들이 힘들겠지만 자주 괴롭혀야겠다고 생각했다. 물론 무지성으로 물어보는건 그냥 숙제 대신해달라는 양아치와 다를게 없으므로, 최대한의 고민을 하고 안되면 미련을 가지면 안된다는 교훈을 얻은 것 같아서 좋았다.
