[Korean FE Article] 데이터 구조를 개선하여 코드 43% 줄이기
글 링크 : https://velog.io/@lky5697/react-junior-code-review-and-refactoring
소개
React 코드를 리뷰 하면서 흔히 할 수 있는 실수들에 대해 소개하고, 어떻게 리팩토링 하는지 단계별로 소개하는 글입니다. 여러분들이 작성한 코드에 이러한 부분은 없는지 가볍게 읽어보면서 살펴 보셔도 좋을 것 같습니다:)
tl;dr
리뷰 할 컴포넌트
기능
원본 코드
원본 코드의 문제
문제 1: 차선의 데이터 구조
문제 2: 상태로부터 변수를 파생하지 않음
문제 3: DOM에 직접 접근
문제 4: 변수 이름
리팩터링
단계 1: 데이터 구조를 배열에서 SET으로 변경
단계 2: 파생되는 상태 사용
단계 3: document.getElementById() 제거
마지막 코드
기억해야 할 점