[React]리액트 개발 중에 빈번하게 발생하는 문제점!

리액트 개발중에 빈번하게 발생되는 몇가지 문제와 그 해결 방안을 소개 합니다.

 

1. 상태 업데이트 문제

  - 비동기 상태 업데이트: setState는 비동기적으로 작동하기 때문에, 연속적인 상태 업데이트가 의도한 대로 작동하지 않을 수 있습니다.
    * 해결 방안: 콜백 함수를 setState에 전달하여 이전 상태를 기반으로 새 상태를 계산합니다.

this.setState((prevState) => ({
  counter: prevState.counter + 1
}));

  - 객체 또는 배열 상태 직접 수정: 리액트 상태에서 객체나 배열을 직접 수정하고 setState를 호출하지 않는 경우, 리액트가 상태 변화를 감지하지 못해 리렌더링이 발생하지 않습니다.
    * 해결 방안: 객체나 배열을 복사하여 수정한 뒤, 수정된 복사본을 setState를 통해 상태로 설정합니다.

this.setState((prevState) => ({
  items: [...prevState.items, newItem] // 배열 복사 후 새 항목 추가
}));

 

2. 생명주기 메소드 오용

  - 생명주기 메서드의 잘못된 사용: 특히 componentDidMount 또는 componentDidUpdate 내에서 상태를 업데이트할 때 무한 루프에 빠질 수 있습니다.
    * 해결 방안: 조건문을 사용하여 특정 조건에서만 상태를 업데이트하도록 합니다.

 

3. 키의 중복 또는 누락

  - 리스트 항목에 고유한 키(Key) 미할당: 리스트에서 각 항목에 key 속성을 제공하지 않거나 고유하지 않은 키를 제공할 경우, 리액트는 항목을 올바르게 재사용하지 못할 수 있습니다.
    * 해결 방안: 각 항목에 고유한 key 값을 할당합니다.

data.map((item) => (
  <div key={item.id}>{item.text}</div>
))

 

4. 메모리 누수
  - 컴포넌트 언마운트 후 상태 업데이트 시도: 컴포넌트가 언마운트된 후에 상태를 업데이트하려고 하면 메모리 누수가 발생할 수 있습니다.
    * 해결 방안: componentWillUnmount 생명주기 메서드를 사용하여 언마운트 전에 필요한 정리 작업(예: 타이머 제거, 이벤트 리스너 제거)을 수행합니다.

5. 성능 문제
  - 불필요한 리렌더링: 컴포넌트가 불필요하게 자주 리렌더링되어 성능 문제를 일으킬 수 있습니다.
    * 해결 방안: shouldComponentUpdate, React.memo, React.PureComponent를 사용하여 불필요한 리렌더링을 방지합니다.