1. antd사용해 SNS화면 만들기
1. antd와 styled-components
1. 프레임워크 / 라이브러리 선호도 확인
- https://npmtrends.com/ npm trends
- 어떤 css라이브러리가 선호되는지, 어떤 프레임워크가 선호되는지 확인 가능
2. antd / styled-components설치
npm i antd@4 styled-components @ant-design/icons
- https://ant.design/components에 가서 마음에 드는 디자인 선택
- Menu적용예시 코드
import { Menu } from "antd";
const AppLayout = ({ children }) => {
return (
<div>
<Menu mode="horizontal">
<Menu.Item>
<Link href="/">
<a>노드버드</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/profile">
<a>프로필</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/signup">
<a>회원가입</a>
</Link>
</Menu.Item>
</Menu>
{children}
</div>
);
};- Menu적용예시
2. _app.js와 Head
- Next.js에는 기본적으로 웹팩이 들어있음. 웹팩이 css를 보는 순간 style태그로 바꿔서 html에 넣어줌.
- pages에 사용되는 공통되는 것들은 pages/_app.js에 넣어줌
import PropTypes from "prop-types";
// antd@4버젼에 해당
import "antd/dist/antd/css";
const App = ({ Component }) => {
return <Component />;
};
App.propTypes = {
Component: PropTypes.elementType.isRequired,
};
export default App;- head를 수정하고 싶을 때는 Next.js에서 제공해주는 Head태그를 사용하면 됨
import Head from "next/head";
<Head>
<meta charSet="utf-8" />
<title>NodeBird</title>
</Head>3. 반응형 그리드 사용하기
- 반응형: 화면크기에 따라 모드가 바뀌는 것, 모바일화면을 먼저 작업할 것!
- 적응형: 모바일, PC 따로 만드는 것
1. antd의 Col속성
- https://ant.design/components/grid 참고
- xs: 모바일
- sm: 태블릿
- md: 작은 데스크탑
- lg, xl: 대 화면
// n/24라고 생각하면 됨.
// 한 줄에 같이 나오게 하려면 합계가 24가 되게 하면 됨
<Row gutter={8}>
<Col xs={24} md={6} />
</Row>- Row gutter속성: Col간격 조절
- a태그 target='_blank'는 보안이슈때문에 사용하려면 항상 rel='noreferrer noopener'을 같이 써줄 것
4. 로그인 폼 만들기
- 이전에는 components와 container폴더를 나누는 추세였지만 요새는 같이 components폴더 안에 넣고 같이 쓰는 편
- 자주 나는 에러는 블로그 정리를 하는 것이 좋음!
- 컴포넌트에 props로 쓰는 함수는 꼭 useCallback을 써야 최적화가 됨
const onChangeId = useCallback((e) => {
setId(e.target.value);
}, []);
<Input name="user-id" value={id} onChange={onChangeId} required />- form의 경우, 코드패턴의 반복이 많으므로 라이브러리 사용을 추천함 (ex. react-form)
5. 리렌더링 이해하기
1. 인라인 스타일 대체방법
태그에 style을 줄 때 객체로 넣으면 안됨. 객체비교는 항상 false이므로 항상 리렌더링이 일어나게 됨!
(성능에 큰 영향이 없다면 그냥 인라인으로 써도 무방함)
1. styled-components를 사용한다
{} === {} // false
// 아래의 구문이 항상 리렌더링이 일어나게 됨!
<div style={{ marginTop: 10 }}>
// styled-components를 쓰는 것도 하나의 방법임
const ButtonWrapper = styled.div`
margintop: 18px;
`;
<ButtonWrapper>
...- antd를 styled-components적용할 때는 아래와 같이 바꾸면 됨
// antd + 인라인 스타일 적용
<Input.Search enterButton style={{ verticalAlign: "middle" }} />
// styled-components 적용 후
const SearchInput = styled(Input.Search)`
vertical-align: middle;
`;
<SearchInput enterButton />2. styled-components를 사용하지 않을 경우
- useMemo 사용하기
const style = useMemo(() => ({ marginTop: 10 }), []);
<ButtonWrapper style={style} />6. 더미 데이터로 로그인하기
- 보통 form태그에 onFinish속성을 사용할 때, 함수에 e.preventDefault()를 많이 사용하지만 antd는 Form태그에 기본으로 해당 속성이 적용되어 있기 때문에 사용할 필요가 없음.
- react에서 배열로 jsx를 쓸 때는 key속성이 필수이다.
<Card
actions={[
<div key="twit">짹짹<br />0</div>,
<div key="followings">팔로잉<br />0</div>,
<div key="followers">팔로워<br />0</div>,
]}
>7. 크롬 확장프로그램과 QnA
1. 크롬 확장프로그램 추천
- chrome웹스토어 -> React Developer Tools, Redux Dev Tools깔기
- element탭에 가면 태그만 보이고 component탭에 가면 react에서 만든 component가 뜨게 됨
- 리렌더링 될 때마다 박스 깜빡거리게 하는 설정
2. QnA
- Q. 리렌더링이 되면 무조건 문제인지?
A. 리렌더링이 된다고 성능에 문제가 있는 건 아님. 너무 많이 되지않게 조절만 하면 됨 - Q. react/vue와 jQuery를 같이 쓰면 안 되는 이유?
A. react/vue는 데이터가 바뀌었을 때 다시 화면을 그려주는데 jQuery는 데이터가 바뀔 때마다 우리가 직접 화면을 다시 그려야 하므로 같이 쓰는 건 추천하지 않음. 같이 쓰고 싶다면 완전 따로 두 개가 간섭하는 일이 없이 만들어야 함. - Q. 하나의 컴포넌트가 거대해지면 어떻게 해야하나?
A. 무조건 쪼개야 함.
8. 프로필 페이지 만들기
- 컴포넌트 구조를 짤 때 처음부터 div태그를 만들거나 하면서 잘게 쪼개는 게 아닌 러프하게 가상의 컴포넌트 구조를 짜면서 구상을 하는 것이 편하다.
<AppLayout>
<NicknameEditForm />
<FollowList header='팔로잉 목록' />
<FollowList header='팔로워 목록' />
...- 컴포넌트는 100줄 넘어가면 분리하는 편. 본인만의 기준을 세워 분리할 것.
- Q. 컴포넌트 만들 때 비슷하지만 데이터 props가 다를 경우 분리하는 게 나은지?
A. props 개수가 많이 차이 나지 않으면 같은 컴포넌트 사용, 개수 차이가 많이 나면 따로 컴포넌트 만들 것.
9. 회원가입 페이지 만들기 (커스텀 훅)
- 변수명은 줄이는 것 보다 그대로 풀어쓰는 편이 좋다. 길어도 됨.
ex. onChangeNick => onChangeNickname - hook을 쓸 수 있는 조건 : 반복문, 조건문, 함수 안에서는 안되고 컴포넌트 안에서만 가능. 예외로 커스텀훅은 가능!
- 회원가입 커스텀훅 만들기
// LoginForm.js
const [id, setId] = useState("");
const onChangeId = useCallback((e) => {
setId(e.target.value);
}, []);이러한 코드를
// useInput.js
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];
};
// LoginForm.js
import useInput from "../hooks/useInput";
const [id, onChangeId] = useInput("");이렇게 줄일 수 있다!
- 무조건 최적화에 집착할 필요 없음. 최적화는 배포 전에 테스트 해본 후에 해도 늦지 않음
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자