[TIL]231117_React 댓글 수정하기

👩🏻‍💻 Today Learn

• 알고리즘 스터디
• FanLetter-Project 50%

---

🔐 알고리즘 문제풀이

문제

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

풀이

function solution(n) {
   const answer = String(n).split('')
        answer.sort((a,b)=>b-a);
    
    const result = answer.map((a)=>Number(a));
    return Number(result.join(''));
}

// 마지막에 Number로 감싸주지 않았더니 "873211" 로 반환됨

• String() : 숫자를 문자로 형변환
• Number() : 문자를 숫자로 형변환
• split() : 문자열을 일정한 구분자로 잘라서 배열로 저장
• join() : 배열의 모든 요소를 연결해 하나의 문자열로 만들어줌

---

🤦🏻‍♀️ 고민한 부분

팬레터 과제중 수정버튼 클릭 후 수정된 부분이 없으면 "수정사항이 없습니다" alert창을 띄우고 수정된 부분이 있으면 변경사항이 반영되어 화면에 그려지게 하는 작업에서 많이 막혔다.
우선 해결된 코드를 기록해보려고 한다.

const { id } = useParams();
const [isEdit, setIsEdit] = useState(false);
const clickData = cardList.filter((item) => {
    return item.id === id;
  });
const [editText, setEditText] = useState(clickData[0].content);

const editBtn = (id) => {
    // 수정완료 버튼을 눌렀을때 확인창 띄우기
    const editCheck = window.confirm("수정을 완료하시겠습니까?");
    if (editCheck) {
      // console.log(clickData[0].content);
      if (editText === clickData[0].content) {
        alert("수정사항이 없습니다");
        return;
      } else {
        setIsEdit(false);
      }
    }
  };

// return부분
  <TextWrapper>
       {isEdit ? (
         <Text
          onChange={(event) => {
          setEditText(event.target.value);
          // console.log(event.target.value);
          }}
          defaultValue={item.content}
          maxLength={300}
          />
          ) : (
          <Text disabled={isEdit === false} value={editText} />
          )}
          </TextWrapper>

문제점 1)

불러온 cardList의 content와 수정한 editText를 비교해서 내용이 같으면 alert창이 떠야하는데 내용이 불러와지지 않았었다.

그래서 불러온 카드리스트의 id를 비교하는 함수를 만들어서 editText의 state 초기값으로 불러온 데이터의 content를 설정해주었다.

그 결과 if로 내용을 비교해서 alert창을 띄우는 것은 성공하였다.

문제점 2)

하지만 수정을 한 후에 완료를 클릭했을때 화면에 그려지는 것은 수정하기 이전값이 나오고 다시 수정을 누르면 수정한 내용이 보이는 기이한 현상이 발생했다.

else값의 setIsEdit(false); 부분에서 수정하기 이전값이 보여진 것인데 한참을 헤매다가 해결했다.

<Text disabled={isEdit === false} value={editText} />

원인은 이 부분의 value값이 item.content 로 되어있어서 불러온 내용이 보여졌던 것이다... 이 값하나만 수정하면 되는것을 정말 빙글빙글 돌아서 도착했다.

그렇게 이부분도 해결완료

문제점 3)

밑빠진독에 물붓기처럼 하나를 해결하면 다른곳에서 문제가 터졌다.
이번에 발생한 문제는 삭제하기 버튼을 클릭했을때 오류가 나는 것이었다.

뭐라는거니...

수정 전 코드

 // 삭제 기능
const clickData = cardList.filter((item) => {
    return item.id === id;
  });
const [editText, setEditText] = useState(clickData[0].content);

  const deleteBtn = (id) => {
    // 삭제버튼 클릭시 취소, 확인 유효성 검사
    //  window.confirm()은 선택적 메시지가 포함된 대화 상자를 표시하고 사용자가 대화 상자를 확인하거나 취소할 때까지 기다리도록 브라우저에 지시한다!
    const deleteCheck = window.confirm("정말로 삭제하시겠습니까?");
    if (deleteCheck) {
      const setDelete = cardList.filter((item) => {
        return item.id !== id;
      });
      setCardList(setDelete);
    } else {
      return;
    }
    // 삭제 확인 후 확인 메시지 띄우기
    function showAlert() {
      alert("삭제되었습니다");
    }
    setTimeout(() => show                                                                               Alert(), 200);

수정 후 코드

 const clickData = cardList.find((item) => {
    return item.id === id;
  });
  console.log(clickData);
  const [editText, setEditText] = useState(clickData ? clickData.content : "");

filter()가 아닌 find로 id값이 같은 하나의 데이터만 찾아봐서 삼항연산자로 수정하였다.

---

✍🏻 회고

이번에는 문제해결과정에서 console.log로 찍어보면서 문제가 되는 부분을 차근차근 찾아가다보니 막연하게 찾을때보다 접근하기 좋았다.
하지만 문제의 원인은 알게되었지만 그것을 해결하는 방법에 대해 코드로 표현하는 것에 대한 감을 찾는 연습이 정말 많이 필요할 것 같다...