[React] antd와 styled-components, _app.js와 Head, 반응형 그리드 사용, 로그인 폼 만들기

Yuri Lee·2022년 5월 9일
0
post-thumbnail

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

antd 사용해 SNS 화면 만들기 > antd와 styled-components

antd Design 이란?

made in 중국, 뷰, 리액트에서 다 사용가능하다. 단점은? 느낌이 너무 확일화. 개성이 없어진다. 디자이너가 있거나 체계가 있는 곳은 거의 쓰진 않는다. Ant Design of React - Ant Design

리액트에 스타일을 입힐 때

여러가지 방법이 있다. 순수 css 사용하기, sass 등의 전처리기 등등 . 하지만 보통 리액트와 같이 컴포넌트 형식으로 개발하는 곳에서는 스타일드 컴포넌트 styled-components 를 주로 사용한다. (컴포넌트 자체에 css를 미리 입혀서 사용함)

어떤 걸 사용하는 건 많이 중요하진 않다. 하지만 요즘엔 스타일드 컴포넌트도 한물 가서 emotion emotion이라는 것을 많이 사용하기도 한다.
→ 서버사이드에서 사용할 때 이모션이 더 쉬울 수도 있다.

트랜드 비교 가능 !

emotion vs styled-components | npm trends

설치

npm i antd styled-components @ant-design/icon

icon 추가 설치한 이유 : 보통 이미지 파일들이 앱의 용량을 결정한다. 아이콘은 따로 최적화해서 라이버리를 분리한 경우도 많다. 따라서 추가로 설치해야 함.

antd 사용해 SNS 화면 만들기 > _app.js와 Head

_app.js 추가

공통된 내용을 처리할 수 있다.

Head 사용하기

import Head from 'next/head'

next에서 head 를 수정하고 싶을 때 Head 컴포넌트를 사용하면 된다.

antd 사용해 SNS 화면 만들기 > 반응형 그리드 사용하기.

반응형으로 할 때는 무조건 모바일 디자인을 먼저 해야 한다. 점점 늘려서 테블릿 → 데스크탑 으로 해야 한다. 데스크탑부터 하면 브레이크포인트 설정이 복잡해진다. 무조건 모바일부터 디자인 하는게 효율적으로 좋다.

gutter

컬럼 사이에 간격을 주는 것이다. 이 용어는 프론트엔드 개발할 때는 알아놓는게 좋다. 컬럼끼리 따닥따닥 넣는 것을 방지한다.

antd 사용해 SNS 화면 만들기 > 로그인 폼 만들기

서버가 없는데 어떻게 로그인을 할 수 있을까? 못한다. 그럼 더미데이터를 사용하면 된다. state 상태 사용해보자. hooks가 나오면서 리액트 공식 페이지에서 컴포넌트랑 컨테이너 구분하는 것을 추천하지 않는다고 한다. 컴포넌트에 프롭스로 넘겨주는 함수는 유즈콜백을 꼭 사용해야 한다. 그래야 최적화가 된다.

느낀점

트랜드 비교하는 사이트 유용하다..👍

profile
Step by step goes a long way ✨

0개의 댓글