15일차-2) [React/JS] 댓글 수정 / Infinite Scroll

댓글 수정

1. graphql에서 게시글 목록을 query 한다.

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
    }
  }
`

2. 배열이 전부 false인 변수를 state에 담는다.

export default function PaginationPage() {
  const { data } = useQuery(FETCH_BOARDS, { variables: { page: 1 } });

	const [isEdits, setIsEdits] = useState([
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
  ]);

3. 수정하기 버튼을 눌렀을 때(event.target.id)의 state값이 true로 바뀌도록 한다.

  const onClickIsEdit = (event) => {
    console.log(event.target.id);
    const aaa = isEdits;
    aaa[event.target.id] = true;
    console.log(aaa);
    setIsEdits([...aaa]);
  };

4. map으로 뿌려준 게시글목록에서 isEdits[index]가 false일 경우는 그대로 목록을 보여줌

  return (
    <div>
      <h1>댓글수정 연습 !!!</h1>
      {data?.fetchBoards?.map((el, index) => (  
        <div key={el._id}>
          
    //isEdits[index]가 false일 경우
    	{isEdits[index] === false && (
            <div>
              <span>
                {el.title} / {el.writer}
              </span>{" "}
              <button id={index} onClick={onClickIsEdit}>
                수정하기
              </button>
            </div>
          )}
          

5. isEdits[index]가 true일 경우는 수정하기 화면을 보여줌

	{isEdits[index] === true && (
		<div>
			<div>=========================</div>
			<div>이것은 수정하기 화면입니다.</div>
			<div>=========================</div>
		</div>
	  )}

하지만 만약 댓글의 수가 엄청나게 많을 경우 그 만큼의 state를 관리하는 것은 매우 비효율적

이럴 경우에는 댓글 컴포넌트를 따로 분리 한 뒤
각각의 컴포넌트에서 isEdit state를 관리 하는 방식이 좋다.

무한 스크롤(Infinite Scroll)

페이지를 아래로 스크롤 하다가 종점에 도달 시 새로운 데이터가 계속해서 추가되는 방식

1. 먼저 무한스크롤을 적용할 영역을 < InfiniteScroll > 태그로 감싼다

2. 스크롤이 해당 영역 종점에 닿았을 때 실행할 기능을 함수로 만들어 loadMore에 지정
   

3. Apollo-Client의 useQuery에서 제공하는 fetchMore함수를 사용하면 다음 page에 해당하는 데이터를 불러와 기존 데이터 뒤에 이어지도록 붙여 줌 (prev는 현재)