nodebird-2일차

##nodebird 2일차

어제 몰랐던 children은 '노드'라고 한다.

여기서 노드는 노드js의 노드가 아니라 리액트 노드(리엑트에서는 화면에 그려지는 것들을 노드라고 한다네요.)이다.

Children은 그냥 감싸준 하위 jsx태그? 정도로 이해했다.

ex)

<AppLayout><div>어쩌구</div></AppLayout>

여기선 앱레이아웃 밑에 div태그가 칠드런인거다.

어쨌든 어느정도 이해했으니 넘어간다.

나는 자바스크립트를 하고있기 때문에 propTypes를 써야한다.

타입스크립트에서는 안쓰지만 어쨌든 쓴다. 예전에 노마드코더 강의 볼때도 나왔던 녀석이다.

##Link
넥스트는 자체적인 Link가 있다.

##eslint
lint는 여러사람이 코딩해도 한사람이 코딩한 것 처럼 규칙을 통일 시켜주는 툴이다.

##코드스플리팅
리액트 특성상 한번에 모든 코드를 받아오는데, 이렇게 되면 안쓸 코드도 받아오게 되는것임.

그래서 코드 스플리팅을 통해서 받아올 범위를 수정함. 이렇게되면 프론트 서버에서 뭘 받아오는지 계속 요청을 해야함.

##서버사이드렌더링
웹의 경우 사용자와의 인터랙션이 많아짐..

검색엔진최적화,성능개선등등을 위해서 사용함

로딩을 줄이기 위해서 서버사이드렌더링을 쓰기도 함+캐싱

##antd, styled-component
antd=> css 프레임워크(버튼같은거 만들필요가 없어짐,단 디자인의 획일화 우려)

_app.js에서 import해주고 넣어주면 좋음

styled-component=>css를 컴포넌트에 입혀서 만드는것 (비슷한것=emotion)

##class랑 hooks 바꾸기
리액트에서는 클래스보다는 훅스를 이용하는것을 추천하고있다.

그래서 https://youtu.be/EUQnxfZgFJU 강좌를 다시봤다.

setState랑 ref를 쓰지않는 컴포넌트에서는 훅스 컴포넌트로 만들어준다고 한다.

클래스방식과 hooks의 표현 방식에는 차이가있다.

hooks 방식이 코드가 더 간결하지만, 속도측면에서 더 느릴 수 있음.

또 이벤트를 잡는데 좀 차이점이 있는듯함.

https://youtu.be/ZyOOdGBqZbk?t=48를 보면 차이점이 좀 극명하게 나타난다.

##반응형
반응형 웹을 디자인할 때는 모바일을 우선적으로 생각해야 한다.(꿀팁. 효율성때매)

모바일->태블릿->데스크탑

가로를 먼저 자르고 세로를 나중에 생각한다. 24가 나누기 좋은 숫자라 24를 이용한다고 함
gutter(컬럼사이에 간격주는거. 따닥따닥 안붙어 있게 함), md(컴퓨터), xs(폰)

##공부 키워드 요약
lint, 리액트노드, 코드스플리팅, antd, styled-component

##앞으로 공부하고 싶은것
styled-component
리액트 커스텀 훅스

##해결하거나 어떻게 공부해야할지 알게된 것
class<->Hooks 변환