React로 SNS 만들기 (2) - antd 사용하여 SNS 화면 만들기

SangBooom·2021년 4월 28일

React next.js

react-nodebird

목록 보기

2/7

개발모드 너무 느리다

next로 개발모드로 진행하다보면 빌드하느라 너무 오래걸린다. 배포모드일때는 다 빌드해놓기 때문에 느린현상이 없어진다. 참자 그냥.

next에서 head 부분을 건들고 싶을때

import Head from 'next/head';

const App = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
      </Head>
      <Component />;
    </>
  );
};

여기서 눈여겨볼 점은 페이지마다 html이 있다고 생각하면됨. 지금 App컴포넌트는 _app.js이다. (pages폴더의 공통 컴포넌트이다) 만약, 따로 적용하고 싶다면 각 컴포넌트마다 Head를 따로 해주면된다.

디자인 원칙

가로먼저 짜르고(col로 먼저 나누고) 세로로 짜르자.

보통 가로는 12나 24등분을 많이한다. 이유는 2,3,4,6,8 등등 나뉘는요소가 많아서 그런것 같다. (약수가 많다)
모바일부터 태블릿, 데스크탑으로 디자인을 차근차근 올라가자.

반응형

데스크탑에서 1920, 2560, 3840px, 모바일 480, 576, 768px 등 크기에 따라 따로 주는 것

적응형

데스크탑, 태블릿, 모바일 따로 주는 것

break-point

xs < 576px
sm >= 576px
md >= 768px
lg >= 992px
xl >= 1200px
xxl >= 1600px

a태그 새창에서 띄울 때

<a href="https://www.naver.com" target="_blank" rel="noreferrer noopener">...</a>

target="_blank" 를하면 새창에서 띄우지만 보안 위험이 있어서 추가적으로
rel="noreferrer noopener"를 적어줘야 위험이 없어진다고 한다.

효율적인 코드 작성하기

useCallback은 함수를 캐싱하는 것이고,
useMemo는 값을 캐싱하는 것이다.

컴포넌트에 props로 넘기는 함수가 있으면 꼭 useCallback으로 감싸서 최적화하자!

inline-style 최적화하기

귀찮아서 <div style={{ marginTop: "10px" }}> 이렇게 inline-style으로 객체를 주는 경우가 많다.
{} === {}는 false이기때문에 v-dom으로 검사하면 계속 리렌더링이 될 것이다. 무조건 지양하자!

근데 성능에 크게 영향이 없으면 그냥 인라인 스타일 써도되긴하다. 함수컴포넌트에서 return ( ... ) 부분이 v-dom인데 inline-style 되어있는 컴포넌트만 다시 그리기 때문에 만약 렌더링 해야될 부분이 많지 않다면 괜찮을 것이다.. 오히려 메모이제이션 하는 비용이 더 들수도 있다.

1. styled-component로 바꾸기

const ButtonWrapper = styled.div`
  margin-top: 10px;
`;
...
return (
  <ButtonWrapper>
    ...
  </ButtonWrapper>
)

2. useMemo로 최적화

cosnt style = useMemo(() => ({ marginTop: 10}), []);
...
return (
  <div style={style}>
    ...
  </div>
)

antd 컴포넌트를 styled-component로 커스텀 할수있다고?

//antd 적용 div
<Input.Search enterButton style={{ verticalAlign: "middle" }} />

//커스텀 후
const  SearchInput = styled(Input.Search)`
  vertical-align: middle;
`
...
 <SearchInput enterButton />