1.컴포넌트를 만들 때 너무 긴 JSX를 작성해 복잡하게 하는 것을 피하고 세분화된 컴포넌트로 쪼개는 것이 좋다.
2.void태그는 <tag />로 닫을 수 있지만 void가 아닌 태그는 이런 방식으로 사용할 수 없다.
하지만 JSX에서는 div같은 non-void 태그라도 태그 사이에 들어갈 내용이 없다면 <div />와 같은 방식으로 사용할 수 있다. 일반적인 컴포넌트들도 div로 시작되지만 <Component />처럼 이용하는 것이 그 예시다.
3.useState는 function 내부에서 선언하며 const [ something , setSomething ] = useState(default) 의 방식으로 진행된다. 원하는 상태명, 상태설정변경함수가 들어가며 default값은 초기 상태(something)에 할당되는 값이라고 할 수 있다.
4.일반적으로 x값의 상태로 특정 컴포넌트의 on/off를 한다면 삼항연산자 {something ? <Component /> : null }를 사용하는게 일반적으로 알고 있었는데 일반적으로 somthing은 true, false의 boolean값이기 때문에 {something && <Component />}의 방식으로 모두 참일 경우 마지막 값을 반환하는 방식으로 컴포넌트를 반환받을 수 있다.
5.props에는 상위 컴포넌트에서 현 컴포넌트에 입력한 상태값들까지 다 받아오기 때문에 (ex_onClick) props.xx를 통해 값 또는 기능들을 가져올 수 있다. (알고보면 일반적으로 props로 내려주는 설정(name = {function})과 기능설정 (onClick = {eventHandler})가 같은 포맷?임을 알 수 있다)
6.Router를 사용하기 위해서는 react-router-dom을 install한 후 index.js에서 BrowserRouter로 App컴포넌트를 감싸줘야한다. App.js에서는 다시 react-router-dom을 사용해 컴포넌트들을 Route로 감싸줘야하는데 그 내부에는 path = ''를 통해 도메인에 입력될 주소 및 변경해야 할 주소들을 받을 수 있다. 이 부분에서는 switch를 사용했는데 검색 특성상 앞부분에 상위경로가 있을 경우 검색을 중단하기 때문에 겹치는 경로 내부에는 exact를 추가해줘야한다. (Route path='/' exact> <Component /> </Route>)
7.위에서 사용한 path로 이동은 주소창으로도 할 수 있지만 일반적으로는 Link를 react-router-dom에서 import한 후 <Link to='경로'> 링크소개 </Link> 방식으로 사용한다. 물론 링크소개 부분에는 다른 component들을 넣어 사용할 수도 있다.
8.xxx.module.css를 사용하는 경우 xxx라는 컴포넌트에만 css가 작동하게 할 수 있는 내장 프로젝트를 사용할 수 있다. 대신 import할 때 이름을 설정해준 후 그 이름에 className을 붙여주는 방식으로 가야한다 (ex_ className = {classes.header})는 xxx.module.css에서 .header로 css를 설정할 수 있다.
요약 및 핵심기능을 들었는데 37가지 중 21가지밖에 듣지 못했다..
전반적인 요약이기 때문에 시간대비 내용이 많은 것 같다.
또한 혼자 할 때는 몰랐던 이런저런 팁들이 있어서 좋았는데
핵심을 다 듣고 나서도 처음부터 쭉 다 들어야 할 것 같다.