팀과제 - 뉴스피드 만들기 (2. 수정 코드 구현하기)

supabase로 수정 코드(update) 구현하기

  수정 기능은 코드 짜는 게 조금 어려웠다. 수정하기 버튼을 누르면 수정할 댓글을 쓰는 창이 나오고, 그 창에서 작성한 정보를 얻어와 댓글을 업데이트해야 했다. 이 과정에서 input, button, form 태그와 onclick, onsubmit, onchange 이벤트 핸들러를 다뤄야 하는데 여기에 들어가는 인수가 정말 헷갈렸다. 이리저리 맞춰보다 안돼서 튜터님에게 도움을 청해 해결했다. 여기에도 세 핸들러와 콜백함수에 인자를 넣는 방법을 정리해야지.

 

1-1. 이벤트 핸들러의 종류

이벤트 핸들러	특징
onClick	-원하는 태그에 넣어서 사용자가 클릭했을 때 발생하는 이벤트 -form 태그와 무관하게 사용 가능
onChange	-HTML 요소에 변화가 일어났을 때 사용(ex. 텍스트 입력칸 변경 등) -내용(이벤트)가 변경되었을 때 감지
onSubmit	-form 태그 내부에서만 사용 가능 -form이 submit(제출)될 때 발생하는 이벤트 -기본적으로 호출할 때 새로고침 효과 발생(e.preventDefault() 사용)

 

1-2. 이벤트 핸들러에 인자를 넘기는 방법

 - 콜백함수에 어떤 인자도 넘기지 않을 때

 이 경우 이벤트 핸들러는 기본적으로 이벤트 객체를 받는다. 

function handleClick() {
  console.log("Button clicked");
}

<button onClick={handleClick}>Click Me</button>

 > handleClick 함수는 아무 인자를 받지 않지만 onClick 이벤트가 발생하면 자동으로 이벤트 객체가 전달된다. 하지만 여기서는 이벤트 객체를 사용하지 않기 때문에 "Button clicked"라는 메세지만 출력된다. 

 

 * 이벤트 객체란

  - React에서는 버튼 클릭, 폼 제출 등 이벤트가 발생하면 자동으로 이벤트 객체(ex. 이벤트가 발생한 요소, 이벤트의 유형, 마우스의 좌표 정보 등)을 해당 핸들러 함수에 전달한다. 

 

 - 이벤트 객체가 아닌 인자를 넘길 때

 이벤트 객체 대신 다른 인자를 넘기고 싶을 때는 함수를 래핑해야 한다. 

function handleClick(name) {
  console.log(`Hello, ${name}`);
}

<button onClick={() => handleClick("React")}>Click Me</button>

 >버튼이 클릭되면 handleClick 함수가 호출되면서 name으로 "React"가 전달된다. 이때 이벤트 객체는 사용되지 않고 "Hello, React"라는 메시지만 출력된다. 이때 "React"는 다른 함수에 전달되는 인자로 사용한 값으로, 다른 값으로 변경해도 상관없다. 

 

ex) 이번 뉴스피드 프로젝트에 사용된 댓글 수정 코드

  //댓글 리스트
  const commentList = comments.map((comment) => {
    const foundUser = profileImg?.find((p) => comment.UserID === p?.UserID);

    return (
      <ul key={comment.CommentID}>
        <div>
          <img src={foundUser?.UserProfile} alt="프로필 사진" style={width = "100px", height = "100px"}/>
        </div>
        <div>
          <li>{comment.CommentDate}</li>
          <li>{comment.CommentContent}</li>
          <button onClick={() => deleteComment(comment.CommentID)}>삭제</button>
          <button
            onClick={() => {
              setTestID(comment.CommentID);
            }}
          >
            수정
          </button>
        </div>
        <div>{comment.CommentID === testID && openChangeCommentWindow()}</div>
      </ul>
    );
  });

  return (
    <CommentInputMain>
      <CommentInput onSubmit={(event) => addComment(event)}>
        <TextArea
          type="text"
          placeholder="댓글을 입력해주세요"
          onChange={(event) => {
            setCommentContent(event.target.value);
          }}
        />
        <button>입력</button>
      </CommentInput>
      <div>{commentList}</div>
    </CommentInputMain>
  );
};

 1. onChange(댓글 입력 시 이벤트)

   - 사용자가 텍스트를 입력하면 onChange 이벤트가 발생하여 event 객체가 함수에 자동으로 전달됨(event.target.value는 TextArea에 입력된 현재 값) -> 이 값을 setCommentContent 함수를 통해 commentContent 상태에 저장함

 2. onClick(댓글 수정 버튼 클릭 시 이벤트)

  - 댓글을 수정할 때 댓글 데이터에서 comment.CommentID를 가져와서(event 객체와는 별개)setTestID 함수에 전달함. -> setTestID(comment.CommentID)는 클릭된 댓글의 ID를 testID 상태에 저장하고, 이를 통해 어떤 댓글을 수정할지 식별하게 됨. -> testID와 comment.CommentID가 일치하는 경우에만 댓글 수정 창을 열 수 있도록 openChangeCommentWindow()가 실행됨.

 

- 이벤트 객체만 인자로 넘길 때

이벤트 객체를 인자로 직접 넘기려면 함수에 이벤트 객체를 받아서 처리한다.

function handleClick(event) {
  console.log(event.target); // 클릭된 요소를 참조
}

<button onClick={handleClick}>Click Me</button>

 >handleClick 함수는 이벤트 객체를 인자로 받아서 클릭된 요소인 event.target을 출력한다. 이때 추가적인 인자를 넘기지 않고 이벤트 객체만 사용한다.