📝 코드 리뷰 읽기 가이드 src 내 파일(App.js, api.js) > 폴더 별 파일 순으로 작성하였으며, 공통적으로 개선되었으면 하는 부분은 하단의 Overview에 작성하였습니다. AS-IS와 TO-BE의 번호를 짝지어 읽으시면 됩니다. (예: AS-IS의 n번과 TO-BE의 n번이 현 코드의 상황 분석과 그 코드의 개선 사항!)

<aside> 💡 ⛔ AS-IS : 현 코드의 상황 분석 ✅ TO-BE : 개선 사항

</aside>

📂 App.js

⛔ AS-IS

1. App.js 내부에 Routes 함수가 함께 존재하고 있다.
2. Routes 내부에 path를 string으로 직접 입력해 주고 있다.
3. useTransition 함수 마지막 매개변수 animated를 object로 직접 입력해 주고 있다.

✅ TO-BE

1. 하나의 모듈에는 하나의 관심사만 존재해야 한다. Routes.js 파일을 별도로 생성하여 분리한다.
2. Routes 내부에 path는 상수로 별도로 관리하여 유지 보수하기 쉽게 만든다.
3. animated 설정하는 매개변수를 상수로 별도로 관리하여 유지 보수하기 쉽게 만든다.

📂 api.js

⛔ AS-IS

1. base URL을 string으로 직접 입력해 주고 있다.
2. ...rest 문법을 사용하여 object 안에 무슨 변수가 있는지 한눈에 파악하기 힘들다.

✅ TO-BE

1. base URL을 별도의 상수로 분리해 전역으로 관리하여 유지 보수를 쉽게 한다.
2. 구조 분해 할당으로 사용하고자 하는 정보를 할당하여 변수의 가독성을 높여준다.

📁 components > Books

> 📂 Book.js

⛔ AS-IS

1. volumeInfo의 imageLinks.thumbnail이 없는 경우 이미지가 화면에 제시되지 않는다.
2. "더 보기" 버튼 클릭 시 기존 Book 컴포넌트가 메모이제이션되고 있지 않다.
3. Book 컴포넌트 <img> 엘리먼트의 alt 값이 비어 있다.
4. jsx 내부에 인라인으로 css를 스타일링하고 있어 마크업 가독성이 떨어진다.
5. jsx 마크업이 대부분 <div>, <p> 태그로 구성되어 시맨틱하지 못하다.
6. 책 검색 결과 레이아웃을 선택 시, 커서의 모양이 default 모양이어서 클릭하는 느낌이 들지 않는다.

✅ TO-BE

1. 이미지가 없는 경우 defalutValue로 넣어줄 기본 이미지 경로를 삽입해 준다.
2. React.memo(Book)을 사용해 줌으로써 성능 최적화시킨다.
3. Book 컴포넌트 <img> 엘리먼트의 alt 값에 title을 입력하여 웹 접근성을 높인다.
4. css 스타일링을 변수로 만들어 분리시켜 가독성을 높여준다.
5. 각 엘리먼트 별로 적당한 태그들을 사용하여 시맨틱하게 마크업한다.
6. css cursor: pointer;값을 설정하여 커서 모양을 클릭하는 hand 모양으로 변경한다.

• 1번 코드 변경 예시
• 4번 코드 변경 예시

> 📂 index.js

⛔ AS-IS

1. Book 컴포넌트의 props로 defaultClassName을 넘겨주고 있다.
2. Book 컴포넌트의 props로 item의 사용하지 않는 정보까지 넘겨주고 있다.

✅ TO-BE

1. Book 컴포넌트로 넘겨주고 있는 props가 styles.item이라는 변하지 않는 상수값이며, 스타일 관리는 props로 굳이 전달하여 관리하는 방식이 아닌 컴포넌트 내부에서 처리하는 것이 맞다고 판단된다.
2. Book 컴포넌트에서 필요한 정보만 전달받아 활용하는 것이 훨씬 효율적이라고 판단된다.