[React] React 에러 해결 - Component Key

Vue3에서는 v-for를 사용하여 elements를 생성할 때 각각의 key 값을 줘야했었다.

error

React에서도 마찬가지인 것 같다.

 

  render() {
    return (
      <div>
        {this.state.notifications.map((notification,i) => {
          return <Notification  message={notification.message} />;
        })}
      </div>
    );
  }

 

map을 사용했던 부분에 key를 주어 에러가 해결

 

  render() {
    return (
      <div>
        {this.state.notifications.map((notification, i) => {
          return <Notification key={i} message={notification.message} />;
        })}
      </div>
    );
  }

 

 

---

생명주기가 두번 발생하는 오류

import React from "react";
import Notification from "./Notification";

const reserveNotifications = [
  {
    message: "안녕하세요, 오늘 일정을 알려드립니다.",
  },
  {
    message: "점심식사 시간입니다.",
  },
  {
    message: "이제 곧 마감이 시작됩니다.",
  },
];

var timer;

class NotificationList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      notifications: [],
    };
  }

  componentDidMount() {
    const { notifications } = this.state;
    timer = setInterval(() => {
      if (notifications.length < reserveNotifications.length) {
        const index = notifications.length;
        notifications.push(reserveNotifications[index]);
        this.setState({
          notifications: notifications,
        });
      } else {
        clearInterval(timer);
      }
    }, 1000);
  }

  render() {
    return (
      <div>
        {this.state.notifications.map((notification, i) => {
          return <Notification key={i} message={notification.message} />;
        })}
      </div>
    );
  }
}

 

해당 코드는 Notification을 1초단위로 보여주는 코드다.

 

 index 0 > 1 > 2 순으로 elements가 보여져야 하는데 시작하자마자 0,1 > 2 처럼 한번에 두번씩 진행 되었다.

 

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

현재 index.js에서 Strict Mode를 사용중이였는데 이게 문제가 되었다.

 

Strict Mode에서는 부수 효과(side effect)를 확인하기 위해 componentDidMount, componentDidUpdate 등의 생명주기 메서드를 한 번 더 호출하여 예기치 않은 동작을 감지하도록 돕는다고 한다.

 

Strict Mode의 영향을 받지 않도록 개발 환경에서 해당 기능을 일시적으로 비활성화할 수 있다. 하지만 이는 개발 중에만 발생하는 것이므로 실제 프로덕션에서는 문제가 되지 않으니 그대로 두어도 된다고 하지만 수정하자.

 

root.render(<NotificationList />)

 

컴포넌트가 두번 호출되는데 왜 굳이 Strict Mode를 사용하는 것인가 의문을 가지게 되는데, Strict Mode가 무엇인지 아래를 확인해보자.

 

• React.StrictMode는 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다. 
• 와 마찬가지로, 는 추가적으로 DOM을 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화한다. 
• StrictMode는 자손 컴포넌트의 부가적인 검사와 경고를 할 뿐이다.

 

그렇다면 잠재적인 문제가 무엇일까?

---

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견

• 비동기 React 애플리케이션에서 특정 생명주기 메서드들은 안전하지 않다.
• Strict 모드가 활성화되면, 안전하지 않은 생명주기 메서드를 사용하는 컴포넌트 목록이 담긴 경고 로그가 출력된다.

 

 

2. 레거시 문자열 ref 사용에 대한 경고

• 레거시 문자열 ref API은 여러 단점이 있고, 이러한 단점없이 객체 ref를 사용하는 방법이 있다.
• 따라서, Strict 모드가 활성화 되었을 때, 레거시 문자열 ref API가 사용되면 경고 로그가 출력된다.

 

 

3. 권장되지 않는 findDOMNode 사용에 대한 경고

• findDOMNode는 변하지 않는 단일 DOM에서만 정상적으로 작동한다.
• 리액트와 같이 렌더링이 자주 일어날 수 있는 환경에서 findDOMNode는 변경사항에 대응할 방법이 없으므로 적절하지 않다.
• ref 객체를 사용하는 방법을 대신 사용할 수 있다.

 

 

4. 예상치 못한 부작용 검사

• React는 렌더링 단계(변경사항 탐지)와 커밋 단계(실제 변경사항 반영)로 나뉘어진다.
• 커밋 단계는 빠르게 진행되나, 렌더링 단계는 느릴 수 있다.
• 렌더링 단계의 여러 생명주기 메서드들이 여러번 호출될 수 있기에, 메모리 누수와 같은 부작용이 없는 것이 중요하다.
• Strict 모드가 모든 부작용을 자동으로 찾아줄 수는 없다.
• 하지만, 일부 함수를 이중으로 호출하여 부작용을 에측하고 문제가 되는 부분을 찾을 수 있게 돕는다.

 

5. 레거시 context API 검사

•  레거시 context API는 오류가 발생하기 쉽기에 Strict 모드에서 사용되면 경고 로그를 출력한다.
•  새로운 context API를 사용하는 것이 권장된다.