프론트엔드 - 7

반복문 - 실무용

• 실무에서는 for문 보다 map, filter를 더 많이 사용

• map, filter 은 모두 배열의 내장함수로, 사용할 때 배열과 함께 사용해야 함
  
  
  

• map, filter 사용방법

map 리턴 값을 HTML로 연결

• 실제 프로젝트에서는 컴포넌트의 return 값 안에서 Map 자주 사용
  
  
  
  
  
  

// RenderMap 컴포넌트
const RenderMap = () => {
  const classmate = ["철수", "영희", "훈이"];

  return (
    //중괄호를 이용해 자바스크립트를 컴포넌트의 return값 안으로 데리고 들어온 것 입니다.
    //리턴되어야 할 값이 한줄이기때문에 괄호생략이 가능합니다.
    <div>
      {classmate.map((item) => (
        <div>{item}어린이</div>
      ))}
    </div>
  );
};
export default RenderMap;

• map 함수 자체를 { }로 감싸서 사용 ({ } 지정 안하면 HTML 내에서 문자로 취급 됨)

+a) 익명함수(화살표 함수)의 생략 (간소화)








생략 안되는 경우

refetchQueries

• 기존에 받아왔던 데이터가 변경되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용 (새로고침)
  
  
  

• 위와 같이 deleteBoard 라는 mutation 함수의 인자에 refetchQueries:[{query:FETCH_BOARDS}] 를 넣으면 해당 mutation 함수가 성공적으로 끝났을 때, refetchQueries 가 실행 됨
  
  
  
  

• refetchQueries 는 배열로 시작하며, 배열 안에 query와 query의 이름(코드 내에서 할당한 변수이름 (ex. FETCH_BOARDS) 을 지정하면 해당 query를 실행시켜 줌

+a) refetchQueries 의 variables

• 기존의 fetch 부분에서 보내준 variables가 있을 경우에는 아래와 같이 작성해야 함
  
  
  
  

map의 index를 key로 사용시 발생하는 문제점

• map 메소드로 JSX 내 태그 반복 생성 작업 시 key 값을 부여하지 않으면 위와 같은 오류가 발생함

React에서 key를 사용하는 이유

• key를 사용하면 react가 각각의 요소의 변경, 추가, 삭제를 식별할 수 있음
  *key 설정이 안되어 있으면 react는 가상 DOM과의 비교로 순차적으로 비교하며 변화를 감지
  
  
  

• key가 있다면 그 값과의 비교로 어떤 것이 수정되었는지 빠르게 감지 가능

• 즉, 고유한 key 값이 없다면, 모든 데이터를 비교해서 변화를 감지해야 하지만 key 값이 있다면, 해당 key값만 비교하여 데이터가 추가되었는지, 삭제되었는지 등을 비교하여 리렌더링 함 (불필요한 렌더링이 없어짐)

+a) Key값으로 Index를 추천하지 않는 이유

• Index를 key 값으로 사용하면 배열의 삭제 등으로 변화가 생길 때 항목의 순서가 바뀌면 바뀐 항목이 해당 index 값을 다시 부여받게 되기 때문에 의도하지 않은 결과가 생길 수 있음 완전히 고유한 key라고 할 수 없음)