[React] Note #2021-01-05 탄력적인 컴포넌트

탄력적인 컴포넌트 작성하기를 읽고

요즘 리액트 코드를 짜면서 겪는 어려움은 바로 컴포넌트를 적당히 분리하는 것과 꼭 필요한 state만 선언하는 것 등이 있다. 지금까지 나는 어떻게든 기능을 돌아가게만 만들기 위해 무분별하게 state를 선언하고, 아무데나 setState를 호출했었다😓. 하지만 이제 인턴을 하면서 터득한 state를 줄여나간 방법 등을 잊지말고 최적화된 코드 작성을 하기위해 노력하자!💪

요약

1️⃣ 데이터 흐름을 중단하면 안됨
2️⃣ 언제나 렌더링 할 준비가 되어 있어야 함
3️⃣ 싱글톤인 컴포넌트는 없음
4️⃣ 항상 지역 상태를 격리하기

그 외 기억할 것

1️⃣ 변수로 jsx타입을 넣는 것은 지양할 것

• 개선방법: 실질적 데이터(ex) json)는 따로 변수에 두고, map 함수(ex) renderOption(key, value))를 선언하여 데이터를 매핑하는 방식으로 해결할 수 있다.

2️⃣ 변수 선언, 함수 인자 등 타입 선언 까먹지 말기!

3️⃣ nextjs 공부하기
페이지 리로딩 구현 중 -> next/router 사용

4️⃣ 직관적이지 않은 변수나 함수선언은 지양하자
(예를들어 ItemTagManageAction 컴포넌트에 그 속에 랜더링하는 컴포넌트인 Select의 child인 Option에 관련된 함수를 선언하는 경우 -> 좋지않다)

5️⃣ javascript array 관련 함수 익히기!

• find()
• filter()
• reduce()
• includes()
  ...