[React] 초보 개발자들이 실수하기 쉬운 것들

들어가며

최근 React를 배우고, 프로젝트에서 실행을 하면서 많은 시행착오를 겪었습니다

그중에서도 많은 개발자들이 공통적으로 성장하면서 겪는 실수들이 있다고 하는데,

이 글은 그러한 내용들을 다루고 있습니다

 

공감되는 부분이 있고, 아닌 부분들도 있겠지만 대부분은 겪고 지나간다는 일이니

재밌게 봐주시길 바라며 포스팅을 시작합니다

---

KOR 본문

1. 컴포넌트화의 부재

1. 하나의 파일에 모든 코드를 입력하여 만들려고 한다면 후에 디버깅을 하고 다루는 데에 어려움을 겪게 된다
2. 하지만 모든 것이 여러 컴포넌트로 세분화가 잘 이루어져 있다면?
   1. 프로젝트 관리를 굉장히 편안하게 할 수 있을 것이다

imagine

2. 직접적인 state 수정

1. 리액트의 모든 state들은 변하지 않는 값을 가지고 있다
2. state, object, array등을 변경할 시 굉장히 난처한 상황이 발생할 수 있다
   1. 이슈가 발생했을 때 고치기가 어려워진다
3. 리액트는 요소들에 대해 관찰하고 업데이트 하는 것이 불가능하다
   1. 물론 바뀌기는 하겠지만 새로고침을 누르기 전까지는 같은 값을 보여 줄 것이다
   2. 해결법으로는 리액트 Hooks의 useState()나 setState()를 사용하는 방법이 있다

3. 넘버 속성 대신에 String값 사용하기

1. 작은 실수라고 볼 수 있는데, 숫자를 string타입으로 받아오는 경우가 있다
2. 결국은 타입이 변하는 것으로, 주의해야 할 필요가 있다.
3. 타입스크립트를 사용하는 경우 이는 어느 정도 해결될 것이다

4. setState()는 비동기이다

1. 비동기란 사용자가 만든 모든 변경사항에 각각 변화가 나타난다는 것이다
2. 실시간으로 변화시키기 위한 비동기를 적용하기 위해 setState를 사용하도록 하자
3. 그렇지 않는다면 모든 변경이 일어날 때마다 새로고침을 눌러야 할 것이다

5. 컴포넌트명을 대문자로 시작하지 않기

1. 이러한 작은 실수는 에러를 나타낼 수 있는데, JSX 의 HTML부분에서 컴포넌트가 import되는 부분을 살펴보면 왜그런 지 알 수 있다
2. <component /> 처럼 소문자로 시작하는 컴포넌트의 경우 html에서 태그로 인식할 수 있기에 오류가 날 수 있다
   1. html의 구조를 살펴보면 <a>, <p>처럼 소문자로 시작하는 규칙이 있다
   2. 그래서 "어? 혹시 이거 내 태그 아닌가?"로 인한 오류가 생길 수 있다

6. 폴더 구조 정하지 않고 일단 코딩하기

1. 더러운 폴더구조야말로 후에 이 더러운 것들을 청소하는 시간을 가지게 만들어 상당히 까다롭다
2. 모든 요소들은 당신이 구조를 변경하는 동안 영향을 받아 이에 대한 오류들을 해결하게 만들 수 있다
3. 작업실을 더럽게 만들어두면 작업이 끝났을 때 모두 정리해야 하는 것과 같다고 볼 수 있다

7. 유일신 컴포넌트

1. 단일 구조로, 재사용되지 않는데 컴포넌트라는 특징을 가진다
2. 모든 UI 요소들을 하나의 컴포넌트에 담지 않도록 하자
3. 당신의 어플리케이션의 모든 부분에 대한 최신 버전 개요를 만들고 각각을 별도의 구성요소로 바꾸도록 한다
4. 이런 방법들을 사용해 나눠두면 모든 컴포넌트들은 더 간단해져서 유지보수하기가 편해질 것이다
5. 모든 부품이 자체제작되고 어디에도 호환되지 않는 컴퓨터와 같다는 소리인데, 당연하게도 유지하기도 어렵다

---

ENG 본문

• At the beginning of a career, each newbie has to overcome troubles and obstacles.
• From middle and senior Reactor developers
• About mistakes that juniors and tranees make
• 7 mistakes

1. Absence of micro-services

1. most common mistakes of newbies
   1. putting everything in one single file
      1. difficult to debug and handle
   2. but when everything is split into separate components
      1. debug and change everything in the most harmless way

2. Direct modification of states

1. all states in React are to be immutable
2. mutation of states, objects, arrays are a dangerous things
   1. hard to fix issues about that
3. React is not able to observe and commence re-rendering of the elements
   1. that have been changed but still have the same reference
4. this can be solved by using useState() hook or setState() method
   1. help React identifying your changes and allow DOM to re-render them correctly

3. String instead of a number as the argument

1. kinds of tiny mistakes
2. not to use number 1 to ‘1’ → type changes

4. setState() is asynchronous

1. asynchronous means that all changes you provide won’t be displayed at the same time
2. They’d rather transfer to another render and then can be seen
3. so, don’t forget about setState and its asynchronous

5. Components name capitalization

1. this small mistake can cause some errors

6. Folder Structure

1. mess structure of fordel can cause necessary task
2. all the elements should be sorted out and that will help you and others to change, scale and improve a project

7. God components

1. made up monolithic, non-reusable parts
2. not to pack all of your UI elements into one component
3. spend some time outlining the various related sections of your app and turning each one into a seperate component
4. All of the components of your program are simpler to maintain and reorganize as necessary when commponents are seperated in this way

---

End

 

 

References

https://medium.com/@rivo.agency2010/top-7-mistakes-that-react-developers-make-4b240424e8d3

Top 7 mistakes that React developers make