[Next] antd 사용해 화면 만들기

Link 태그

• a 태그 대신 Link 태그를 사용하는 것이 좋다. a 태그를 사용하면 전체를 다 불러오게 되므로!
• 링크 태그로 호출이 될때 리소스를 거의 받아오지 않고 필요한 부분만 더 받아온다.
• 코드 스플릿이 잘 되어 있으면 효율적인 사용자 경험을 줄 수 있다.

prefetching

• 첫 화면에 링크 태그로 감싸져 있는 path가 있다면 홈이 로드될때 그 페이지에 대한 데이터를 미리 받아 오는 것
• a 태그는 일어나지 않지만 link 태그를 써야지만 일어나게 된다.

코드 스플릿팅이 되어 있어 한 화면을 그릴 때

반응형 그리드

• 가로 -> 세로
• 반응형으로 만들 경우 모바일(xs)->테블릿(sm)->작은 데스크탑(md) 순으로 디자인 해야 한다! 효율성을 위해서

모바일일경우는 화면 100% 차지, 데스크탑일 경우 n/24

        <Col xs={24} md={6} /> 
        <Col xs={24} md={12} />
        <Col xs={24} md={6} />

• 모바일경우에는 화면 100%로 세로로 3줄 배치된다.
• 데스크탑 환경에서는 가로로 25%, 50%, 25%로 배치가 된다.

   <Col xs={13} md={6} /> 
   <Col xs={11} md={12} />

• 모바일의 경우 위와 두줄을 가로로 배치하고 싶다면, 두합이 24이하여야 한다.

gutter

<Row gutter={8}> 

• gutter는 컬럼사이의 간격을 말한다.

새창에서 띄울경우

<a href="https://velog.io/@sharryun" target="_blank" rel="noreferrer noopener">Made by Chaeyun</a>

• 타겟 blank가 보안 위협이 있어서 위와 같이 적어줘야 한다.

리렌더링

• ant 디자인을 커스텀 하기 위해서 인라인 스타일을 적용하게 되는데 그렇게 되면 바뀌지 않아도 리렌더링이 일어나서 성능적으로 저하된다. (useMemo or styled-components 사용)
• 리렌더링 되면 실제로 화면에는 return에서 이전 컴포넌트와 비교해서 달라진 부분만 다시 그리게 된다.

useMemo

const ButtonWrapper = styled.div`
  margin-top: 10px;
`;
const style = useMemo(() => ({ marginTop: 10 }), []);
<ButtonWrapper style={style}>

Redux

• 데이터는 중앙에서 한번에 관리(중앙 저장소)하는 것이 좋다. 그러므로 리덕스를 사용한다.
• 추적하기가 쉽지만, 코드량이 많아진다.

비동기(요청, 성공, 실패 3가지 단계로 구별됨)

• context API는 직접 비동기 요청 구현을 하여야 함
• 비동기 요청이 많다면 redux, mobx를 사용하는 것이 좋다.

next-redux-wrapper

• 리덕스 간편하게 만드는 라이브러리이다.
  https://github.com/kirill-konshin/next-redux-wrapper

npm i next-redux-wrapper
npm i redux
npm i react-redux

리덕스 원리, 불변성

• 처음에 앱에 대한 전체 상태를 하나의 객체로 표현을 해두고,
• 변경하고 싶을 때마다 action을 만든다.
• 액션을 디스패치할때 reducer에 적어준 방식에 따라서 state 저장소가 바뀐다.

const next = prev;
next.age = 23;
prev.age; // 23

• 참조관계이므로, prev.age이 28로 변경되지 않고 23으로 변경된다.
• redux는 리덕스 dev-tool을 사용해서 타임머신처럼 과거, 미래를 추적할 수 있는데,
• 불변성을 유지하지 않게 되면 위와 같이 히스토리가 없어지게 된다.

...state 사용하는 이유

• 바뀌는 것만 변경하고, 안바뀌는 것들은 참조 관계를 유지해서 메모리를 아낄 수 있게끔 하기 위해서

Reducer

• (이전상태, 액션) => 다음상태

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CHANGE_NICKNAME":
      return {
        ...state,
        name: action.data,
      };
  }
};

action creator

• 그때그때 액션을 만들어내는 action creator를 만들어서 dispatch를 해주면 리듀서에 따라서 다음 상태 반환됨. action.data에 mighty tak이 들어가게 된다.

//action creator
const changeNickname = (data) => {
  return {
    type: "CHANGE_NICKNAME",
    data,
  };
};

changeNickname("boogicho");

store.dispatch(changeNickname("mighty tak"));

//reducer (이전상태, 액션) => 다음상태
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CHANGE_NICKNAME":
      return {
        ...state,
        name: action.data,
      };
  }
};