[FE] React.js & Next.js 초기 트러블슈팅

Missing "key" prop for element in iterator

map 함수를 사용할 때 자식 Element를 반복적으로 생성할 때 key 값을 독립적으로 주어야 한다. 그렇지 않으면 해당 에러를 띄운다. 그러나 key 값을 주지 않아도 렌더링하는데는 문제가 없다. 그 이유로는 React.js에서는 DOM 트리를 업데이트할 때 key 속성을 통해 diff 알고리즘을 적용하여 렌더링을 최적화한다고 한다. 그래서 key 속성이 없어도 렌더링에는 문제가 없지만 diff 알고리즘을 적용하지 못하기 때문에 렌더링 성능에 영향을 주게 된다.

import Link from "next/link";

export default function Home() {
  let items: String[] = ["apple", "banana", "coconut", "melon"];
  var i = 0;
  return (
    <div>
      <h1>안녕하세요!</h1>
      <Link href="/dev">이동</Link>
      <div>아무것도 없음</div>
      {items.map((item) => {
        i += 1;
        return (
          <h2 key={i}>
            {item} ${i}
          </h2>
        );
      })}
    </div>
  );
}

 

Next.js 핫리로딩(라이브리로딩) 안됨

Next.js 9.0 version 이상부터는 live reload가 자동 활성화되어있어야 하는데 동작을 하지 않는다.

 

개발자 모드로 실행

npm run dev

라우트 주소와 폴더명을 동일하게

// ./page.tsx
<Link href="/dev">이동</Link>

// 폴더명은 똑같이 dev로
// dev 폴더 내 인덱스 파일의 컴포넌트 이름도 똑같이 작성해야 한다.
// 단, 첫글자는 대문자로
// ./dev/page.tsx
export default function Dev() {
  return (
    <div>
      <h1>안녕하세요! 여기는 dev페이지입니다.</h1>
      <Link href="/">홈</Link>
      <div>배고프다</div>
    </div>
  );
}