[FE] React-NodeBird 리뉴얼 정리(2)

1. antd 사용하기

• npm i antd@4 ant-design/icons@4

• 아이콘은 용량을 많이 차지하므로 보통 따로 설치를 해야한다

• 넥스트는 기본적으로 웹팩이 들어있다. 원래 css파일은 import를 못하는데 웹팩이 css를 보는 순간 스타일 태그로 바꿔줘서 html에다가 넣어준다. import를 할 수 있는 건 자바스크립트뿐이다. 웹팩은 이미지등 여러가지 파일을 확장자와 상관없이 (로더가 필요하지만) 합쳐준다.

• css가 깨지면 css 파일을 import 해준다
  import "antd/dist/antd.css";

• 반응형 제작할 떄 그리드 시스템을 사용한다

• xs: 모바일, sm: 태블릿, md 데스크탑

• gutter : 컬럼 사이의 간격을 의미한다

2. prop-types 사용하기

• children을 검사할 때는 node

AppLayout.propTypes = {
    children: propTypes.node.isRequired,
}

• 컴포넌트를 검사할 때는 elementType

App.propTypes = {
    Component: PropTypes.elementType.isRequired,
};

• setState를 검사할 때는 func

LoginForm.propTypes = {
    setIsLoggedIn: PropTypes.func.isRequired,
};

3. nextjs에서 공통적인 부분을 반영하는 방법

• _app.js 파일을 만들어서 공통적인 부분을 추가한다.

  _app.js는 pages들의 공통부분이다

• 만약에 Head를 수정하고 싶다면 next에서 제공하는 Head를 사용한다

  import Head from "next/head";

• 적응형 : 모바일 페이지, 웹 페이지, 태블릿 페이지 따로 제작
• 반응형 : 모바일 화면에서 화면이 늘어남에 따라 배치가 바뀌도록 제작

4. 페이지에서 a 링크를 만드는 방법

• <a href="url">주소</a>
• 새로운 창에서 띄우려면 target="_blank"
• 링크의 보안을 좋게 하려면 rel="noopner noreferrer"를 추가

5. 리렌더링 이해하기

• 인라인 스타일링을 할 때 단위를 넣고 싶으면 문자열로, 단위를 생략하고 싶으면 숫자만 쓴다 (숫자만 쓰는 경우가 더 많다)
  e.g. <div style={{ marginTop: "10px" }}>
  또는 <div style={{ marginTop: 10 }}>
  cf) marginTop은 자바스크립트용, margin-top은 css용 표기방법
  

• 리렌더링이 될 때 함수가 통째로 재생성 되는데 그 안에 객체가 있으면 객체가 재생성된다 -> 왜냐면 {} === {} 는 항상 false이기 때문!
  -> 객체의 재생성을 막는 방법중 하나로 styled-Component를 사용할 수 있다.

• styled-components에서 컴포넌트를 스타일링 하는 방법
  const SearchInput = styled(컴포넌트이름).

• 따라서 렌더링을 최적화하기위해서 스타일드 컴포넌트를 만들거나, useMemo를 사용한다

  cf) useMemo와 useCallback의 차이 -> 값을 캐싱/ 함수를 캐싱

- 리렌더링에 대한 이해(중요)

• 리렌더링이 될 때 함수컴포넌트 전체가 다시 실행되는 건 맞다.

• 다시 그리는 부분은 JSX에서 리렌더링 전과 달라지는 부분만 다시 그리는 것 -> 함수 컴포넌트 안에서 return 부분이 버추얼 돔

• 그러므로 인라인 스타일에 객체가 들어가 있으면 함수컴포넌트가 재실행 될 때 마다 그 객체가 있는 곳부터 내부 태그까지 모두 화면에 다시 그린다->성능악화

• 리렌더링은 JSX부분을 다시 그리는 건데 리렌더링이 수십번 일어나도 달라지는 부분이 없으면 화면을 다시 그리지는 않는다.

• 화면을 다시 그리지는 않지만 함수가 실행된다는 점에서 어느정도 시간을 잡아먹기 때문에 리렌더링이 너무 많이 되지만 않게 어플리케이션을 만들자

• 내 생각: return 부분에 들어가면서 다시 그리면 안되는 부분은 참조 자료형이다! 따라서 객체, 배열, 함수는 캐싱해서 넣자! 변해야 되는 부분(데이터 받아오는 곳)은 캐싱을 하지 않거나 의존성 배열을 잘 넣어줘야 한다!

6. 커스텀훅

• 훅을 쓰는 조건
  - 함수, 반복문, 조건문 안에서는 사용할 수 없다. 컴포넌트 안에서 뎁스가 1단계인 곳에서만 사용 가능. 유일한 예외가 커스텀훅!
  - 훅스를 이용한 같은 패턴의 코드가 반복될 때 하나의 훅스로 만들어서 재사용하는 방법
  e.g.

  import { useState, useCallback } from "react";
  		export default (initialValue = null) => {
  const [value, setValue] = useState(initialValue);
  const handler = useCallback((e) => {
      setValue(e.target.value);
  }, []);
  return [value, handler];
  };

7. 기타

• 리액트에서 JSX문법 안에 배열을 사용하고 싶을 땐 key를 넣어줘야 한다

• norefferer noopenner는 어디서 이 사이트로 들어왔는지 같은 정보를 제공하지 않기위한 코드다

• 리액트나 뷰의 장점은 데이터가 바꼈을 때 알아서 화면을 바꿔준다는 점이다. 데이터가 바뀌면 알아서 리렌더링이 된다. 반면에 제이쿼리는 자기가 알아서 화면을 다시 그려줘야 한다

• Echart는 차트를 만들어주는 라이브러리인데 퀄리티가 좋다

• 훅스가 생기면서 컴포넌트에서 클래스를 사용하지 않아도 데이터를 바로 받아올 수 있다? 컨테이너 따로 구별해주지 않아도 된다

• 오픈소스를 선택하기 전에 npm trends에서 검색하자
  https://npmtrends.com/css-vs-material-ui-vs-sass-vs-styled-components