key

체크박스를 눌러놓고 삭제를 하면 체크박스는 그대로 -> 키가 없다
고유한 값을 키로 설정 (id)

<Row key = {el.number>

index도 고유한 값이지만 key에는 넣으면 안된다
index로 key를 넣으면 key가 안사라짐

refetchQuery

보드삭제를 하고 새로고침을 해야 삭제를 확인할수있다
-> 바로 확인할 수 있는 refetchQuery를 하자
근데 모든 Mutation 이후에 refetchQueries를 사용하는 것은 아니고! Mutation 이후 변경된 데이터를 받아올 수 없을 경우에 사용한다

useMutation 함수 안에서 refetchQueries라는 키가 있다는 것을 알 수 있습니다. Apollo에서 제공하는 기본 기능

const deleteBoard = async () => {
	try {
	const result = await deleteBoard({
		variables: {boardId: router.query.boardId,},
		refetchQueries: [{ query: FETCH_BOARDS,
				variables: { boardId: router.query.boardId }
                		}]
                        });
	} catch (error) {
	  console.log(error);
	}
};

refetchQueries는 배열로 시작하여, 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해주면 Mutation이 성공적으로 끝났을 경우 refetchQueries를 실행시켜줍니다.

그 외 내용

코드 줄이기

-> 이런것들은 나중에 라이브러리 사용으로 간결해진다

background-color: ${(props) => props.isActive === true ? "yellow" : "none"};


background-color: ${(props) => props.isActive ? "yellow" : "none"};

=== true -> 생략가능

게시물 등록 페이지

function onChangeMyWriter(event) {
      setMyWriter(event.target.value);
      if (event.target.value !== "") {
        setMyWriterError("");
      }
      if(event.target.value && myPassword && myTitle && myContents){
        setIsActive(true)
      } else {
        setIsActive(false)  ** -> 값이 비면 default(회색)로 바뀜
      }
    }

router는 꼭 페이지서만 써야하는건 아닌데 주의해서 써야한다
컴포넌트를 빼오는 이유는 재사용이 목적인데
위에 오른쪽 컴포넌트를 다른 곳에서 사용하면 1번 박스 연동이 이상해질 수 있다

왼쪽위는 에러안나는데
왼쪽 아래는 new에 [aaa]폴더가 없어서 라우터 오류발생

주소

/board -> 게시물 목록 보기

/board/new -> 게시물 등록하기

/board/:boardId -> 게시물 상세보기

/boards/edit -> 게시물 수정하기 안됨; 해당 보드아이디의 게시글만 수정해야하기때문에

/boards/:boardId/edit -> 게시물 수정하기

/products -> 상품 목록 보기
/products/new -> 상품 등록하기