comment edit

ver1

index !== myIndex ? (
  <div key={el?.id}>
  	<span style={{margin:"15px", padding: "0px"}}>{el?.title}</span> 
	<span style={{margin:"15px"}}>{el?.writer}</span>
	<button id={String(index)} onClick={onClickEdit}>수정하기</button>
  </div>
) : (
  <input type="text" key={el?.id}></input>
)

수정하기 버튼을 누르면 onClick효과로 해당 게시글의 index를 myIndex에 저장
화면에 보이는10개의 게시글중 myIndex의 값과 동일한 index값을 가지는 항목만 인풋칸으로 변경

해당 방식은 한번에 두개 이상의 게시글을 수정하기로 전환하지 못한다
상황에따라서는 상관없지만 범용성을 위해서 동시에 여러글을 수정할 수 있도록 해보자

ver2

const [myIndex, setMyIndex] = useState([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false
]);

게시글 수량만큼 불리언값을 가지는 배열을 만들고
게시글의 index = MyIndex의 index 갯수를 맞춰서
각각 게시글이 Edit 상태인가를 확인하는 용도로 사용한다

const onClickEdit = (event : MouseEvent<HTMLButtonElement>):void => {
  const a = [...myIndex]                     
  a[Number(event.currentTarget.id)] = true
  setMyIndex([...a]);                        
}

수정하기 클릭시 해당 Index의 값을 true로 변경해준다

동시에 여러개 수정하기가 가능하다

하지만 게시글 목록이 늘어날때마다 myIndex의 값 갯수도 직접 늘려줘야한다

ver3

게시글 목록 하나하나를 컴포넌트로 분리하여 각각의 게시글별로 state를 갖도록 해보자

const onClickEdit=() :void=> {
  setIsEdit(true);
};

컴포넌트를 분리시켜서 하나의 게시글 목록당 하나의 state만 갖고

<div>
  {data?.getBoards?.map((el) => (
    <CommentItem key={el?.id} el={el}></CommentItem>      
  ))}
</div>

Boards의 갯수만큼 출력하도록 할 수 있다.