오늘 공부 계획 및 공부한 내용📝
- 개인 프로젝트
- 디테일 뜯어보기(게시글 수정, 삭제)
2) useEffect
: 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook.
==> useEffect는 비동기 작업이나 외부 API 호출, 렌더링 이후에 수행해야 하는 작업을 처리하는데 주로 사용
==> 여기서는 get Note로 해당 params.id에 해당하는 데이터를 가져온 다음에 수정, 삭제 작업이 들어가야 하기에 useEffect가 필요함.
==> [data]를 의존성 배열로 설정하여, data 값이 존재하는 경우 또는 변경될 때마다 내부의 콜백 함수가 실행됨.
이는 data 값이 로딩이 완료되어 데이터가 존재하는 경우에만 코드가 실행되도록 하는 역할.
이를 통해 데이터가 변경되었을 때 setTitle(data.title)과 setDesc(data.desc)를 호출하여, data 객체의 title 속성과 desc 속성을 title 상태와 desc 상태에 저장함.
따라서 컴포넌트가 렌더링되고 화면이 업데이트될 때, 최신의 데이터를 보여줄 수 있음.
문제🧐 / 해결과정⚒️
1) 게시글을 수정을 하는 데 기존에 prompt창을 통해 수정 기능을 구현했던 게 미관상 아쉬워 수정 방식을 바꿔보고 싶었다.
수정 페이지를 따로 만들까 하다가 가뜩이나 많은 페이지... 더 늘리기가 싫어 기존 디테일 페이지에서 바로 수정을 하기로 했다.
prompt창 대신 모달로 수정 내용을 받아서 입력을 할까 했지만..
게시글 내용이 적혀있는 칸에서 바로 수정하기로 했다. 보통 웹사이트 수정이 그러니까
동기가 알려준 방법..!
📌 입력 필드를 읽기 전용 상태를 나타내는 상태 변수 (readOnly, setReadOnly)로 관리하기!
초기 값으로 true를 설정해 필요에 따라 setReadOnly 함수를 호출해 readOnly 값을 변경하여 입력 필드를 편집 가능한 상태로 변경하는 것이다.
// 수정 버튼
const editButtonHandler = () => {
setReadOnly(false);
};수정 버튼 onClick함수인 editButtonHandler가 실행되는 순간, setReadOnly가 false가 되어 게시글 내용이 있던 자리가 바로 편집 가능한 상태로 변경이 된다.
수정한 내용을 다시 저장하기 위해 readOnly가 false인 상태에만 저장 버튼이 보이도록 아래 코드를 추가해줬다.
{!readOnly && (
<Styled.SaveButtonBox>
<button>
<FaSave
size={"35px"}
color="#5A4D50"
cursor="pointer"
onClick={saveButtonHandler}
/>
</button>