React/Redux - 실수 모음집 (누적 중)

(어떤 글을 보고 영감을 받아서 누적하기로 함) https://www.educative.io/blog/top-react-mistakes

Top 10 mistakes to avoid when using React

 

1. 충분한 컴포넌트를 만들지 않는다. 
2. State를 직접 수정한다.  
3. number 타입을 string타입으로 Props 전달한다. 
4. 리스트 타입 컴포넌트에서 key를 사용하지 않는다.
5. setState가 비동기라는 것을 잊는다. 
6. Redux를 너무 많이 사용한다.
7. God componenets를 만들어 사용하는 것 
8. ReactJS 폴더 구조를 따르지 않는 것
9. number 타입을 string타입으로 Props 전달한다. 
10. 컴포넌트 이름을 대문자로 작성하지 않는다. 

 

 

1. useSeletor 사용 시 알 수 없는 타입 에러 발생 

- 에러 메시지 : “Uncaught TypeError: Object(…) is not a function”

- 이유 : useSelector를 react에서 import하는 코드로 발생함 

react-redux useSelector is telling "Uncaught TypeError: Object(...) is not a function"

 

2. Expected an assignment or function call and instead saw an expression. (no-unused-expressions)

- 에러 메시지 : Expected an assignment or function call and instead saw an expression. (no-unused-expressions)

- 이유 : map으로 JSX 구문 합성 시에 callback 함수 안에 return을 사용하지 않아서 발생함. 

// 에러 유발 코드 
<ul>
  {names.map((name) => {
     <li key={name}>{name}</li>; 
  })}
</ul>

// 에러 수정 후 코드 
<ul>
  {names.map((name) => {
    return <li key={name}>{name}</li>;
  })}
</ul>

 

 

3. Warning: A component is changing an uncontrolled input to be controlled. 

- 에러 메시지 : Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

- 이유 : useState 사용 시 초기화하지 않음. 

// 에러 유발 코드 
const [state, setState] = useState();

// 에러 수정 후 코드 
const [state, setState] = useState("");

 

 

4. Expected corresponding JSX closing tag for <img>

- 에러 메시지 : Expected corresponding JSX closing tag for <img>

- 이유 : img 태그를 닫지 않아서 발생함. => html5 규약과 달리 jsx는 jsx 룰에 따른다. 태그를 닫지 않으면 컴파일 오류가 발생한다. 사용자 정의 컴포넌트 뿐만 아니라 일반 HTML처럼 보이는 객체도 모두 닫아야 한다. 

// 에러 유발 코드 
    <>
      {images.map((image) => (
        <img src={image} alt="gallery">
      ))}
    </>

// 에러 수정 후 코드 
    <>
      {images.map((image) => (
        <img src={image} alt="gallery"/>
      ))}
    </>