리액트 학습 노트 (중급) 2일차 정리

_app.js

컴포넌트간에 공통된 요소들을 한 곳에 모아두는 목적이다.

컴포넌트를 랜더링할 때

next.js가 알아서 _ app.js의 컴포넌트로 래핑해준다.

css 파일 import

next 프레임워크 안에 webpack이 내장되어 있다.

css 파일은 import를 할 수 없지만

webpack이 style 태그로 바꿔서

html에 넣어준다. (물론 로더를 설치해야함)

디자인 원칙

1. 가로 먼저 나누고 그 안에서 세로로 나눈다.

2. 반응형을 개발할 땐 모바일 -> 태블릿 -> 데스크탑 순으로 개발한다.

반응형 쉽게 만들기

antd의 Row, Col 컴포넌트를 활용한다.

antd는 화면을 24개의 컬럼으로 나누고

xs: 모바일

sm: 태블릿

md: 작은 데스크탑

지원하는 화면 너비 속성에 따라 칸을 몇 칸 차지할지 설정할 수 있다.

자세한 내용은 antd 공식 문서를 보자.

React 리랜더링

class 컴포넌트의 render 메소드가 호출되거나

함수 컴포넌트가 호출되어도

render에 있는 jsx 전체가 리랜더링 되는 게 아니라

react-dom이 달라진 부분(state, props, 기타 속성)을 검사해서

그 부분의 컴포넌트를 리랜더링 시킨다.

검사하는 방법은

virtualDom(render 내부의 jsx부분)을 만들어서 이전돔과 비교하는 방식이다.

기타

1. gutter 속성 - 컬럼 사이의 간격을 설정
2. 모든 컴포넌트에 공통된 요소는 _app.js에 정의하고
   특정 컴포넌트들끼리 공통된 요소들은
   따로 부모 컴포넌트를 만들어서 특정 컴포넌트들을 감싸준다.