짧은코딩

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 잘못된 코드 const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id) ); 이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다. 해결 방법 const { data, isLoading, isError, error } = useQuery( ["comments", post.id], () => fetchComments(post.id) ); 이 경우 key를 ["comme..

map 함수 리액트에서 map 함수를 써주게되면 key를 줘야한다. ary.map((item, index) => return {item} ); 나는 보통 이렇게 map 함수의 index를 key 값으로 줬다. 하지만 이는 anti-pattern 중 하나이다. 이렇게 index를 key 값으로 주면 안되는 경우는 ary 배열 중 한 값이 지워지거나, 순서가 달라질때, 중간에 값이 추가되는 경우가 대표적이다. 다만 배열의 값이 절대 바뀔 일이 없다면 key 값을 index로 줘도 상관없다. ary.map((item, index) => return {item} ); 따라서 이런 경우에는 위 코드처럼 고유 id를 만들어서 key 값으로 주는 것이 좋다.