[KakaoVillains] 2차 리뷰

Search 페이지

1. 비교연산자

빈 스트링과 비교 없이 간단하게 사용하는 방법! &&연산자 사용하기
className을 다르게 부여해서 css효과에 display:none 을 줬었는데, 버튼태그 자체를 조건부 렌더링으로 구현할 수 있었다.

2. React.Fragment

JSX에서 조건부 랜더링을 하기 위해서 최상위 컴포넌트로 감싸줘야 했다.
이때, div태그 대신 빈 태그 fragment 사용할 수 있다.

다만, 레이아웃에 문제가 할 수 있어 추후 claasName을 부여한 div 태그로 수정하였다.
(참고) React 공식문서: fragments

3. Link 태그 안에 button 태그

라우터 경로를 사용하여 button 태그 클릭 시 이동 기능을 구현하려고 했다.
버튼 태그 자체가 click 기능이 있는데, 다른 기능을 부여하면서 한 번에 라우터를 추가한다는 게 생각없이 link태그로 감싸줘 버렸다.
+) map 함수를 실행하고 key값을 부여할 때에 최상단 태그에 부여해야 하는 데 이 과정에서 Link 태그가 최상단 태그가 되어 key prop 오류가 발생했다.

Link태그 안에 li로 변경하거나 Button 태그의 onClick 이벤트를 사용해야 한다. (버튼태그는 form태그로 submit 기능이 있다는 것을 잊지말자)

Category 페이지

1. LifeCycle과 setState

setState의 두 번째 인자는 callback 함수이다.
비동기실행, LifeCycle에 대해 완벽한 이해가 되지 않은 상태에서 사용했다.

세션 복습을 잊지말자!!!!!!!!!!!!!