18 리액트 문서 읽어보자. JavaScript in JSX with Curly Braces / Passing Props to a Component / Conditional Rendering /

Passing Props to a Component
Use spread syntax with restraint. If you’re using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!

• 같은 프롭스를 두 번 쓰는 휴먼 에러나 / 자바스크립트는 런타임 단어니깐. props에 런타임 에러를 일으킬 것들을 보낼 수도 있는데 리액트 문법에만 맞다면 보낼 수 있는거잖아? 이런걸 방지하기 위해 남용하지 말자.

//Card가 children이라고 생각할 때, 따로 fragment로 감싸지 않는다. 
<Card>
<h1>안뇽</h1>
<h1>안뇽</h1>
</Card>

Conditional Rendering

return null; 많이 사용하지 마라. 18버전부터 return;만 해도 된다.

foo.length && <></> 이런식으로 쓰지 않는거 꼭꼭 모두에게 리마인드.. >> 앞에 boolean 형태로 들어가도 된다.

&& 잘 안 쓰는 이유 > 다른 사람이 보기에 삼항이 더 명시적이고 undefined, null은 전혀 다르기 때문에 따로 분리해서 해주면 좋을 거 같다.

null == undefined 같아보지만 엄격하게 타입 체크를 한다면 null은 object, undefined = undefined

두 개 체크 할 때 편리하게 ! 이용할 수도 있지만 이건 0, ''까지 포함한다.

이벤트 실행할때
1. onClick={(e) => console.log(e.target)}
2. onClick={onClick}
요즘 추세는 1번이다.....