리덕스 붙이기 전 앤트디자인 사용해보기

이번 클론코딩 ui는 앤트디자인을 사용한다.

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

import { Menu, Input, Row, Col } from 'antd';

 

참고로 프로젝트를할때 반응형을 적용시키려면 모바일 뷰를 먼저 만지는것이 좋다.

앤트디자인에서 지원해주는 Row(가로), Col(세로)를 만져주면된다.

 

새로운 브라우저에서 링크 열기

<a href="https://jennayeo.tistory.com" target="_blank" rel="noreferrer noopener">made by JennaYeo</a>

그냥 target="_blank"만 해줄 경우 보안에 취약하기때문에 noreferrer noopener를 꼭 추가해준다.

 

로그인 폼 만들기

서버가 아직 없기때문에 더미데이터를 먼저 만들어준다.

// AppLayout.js

const [isLoggedIn, setIsLoggedIn] = useState(false);

// 원하는 위치에서 로그인이되었다면 UserProfile를, 그렇지않다면 LoginForm을 보여준다.
{isLoggedIn? <UserProfile /> : <LoginForm/>}

// LoginForm.js

import { useState, useCallback } from 'react';
import {Form, Input, Button} from 'antd';

const LoginForm = () => {
    const [id, setId] = useState('');
    const [password, setPassword] = useState('');

    // 컴포넌트에 props로 넘겨주는 함수는 useCallback을 써야 최적화가된다.
    const onChangeId = useCallback((e) => {
        setId(e.target.value);
    }, []);

    const onChangePassword = useCallback((e) => {
        setPassword(e.target.value);
    }, []);

    return (
        <Form>
            <div>
                <label htmlFor="user-id">아이디</label>
                <br />
                <Input
                    name = "user-id"
                    value={id} 
                    onChange={onChangeId} 
                    required 
                />
            </div>
            <div>
                <label htmlFor="user-password">비밀번호</label>
                <br />
                <Input 
                    name="user-password" 
                    value={id} 
                    onChange={onChangePassword} 
                    required 
                />
            </div>
            <div>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </div>
        </Form>
    );
};

export default LoginForm;

로그인 회원가입 버튼 위쪽으로 공간을 주기위해 style에 객체로 마진을 주었다. 그런데 여기서 문제점은 객체는 생성될때마다 새롭게 태어나는데 리액트가 virtual dom으로 달라진 곳을 찾다가 어 객체가 변경되었네!하면서 리랜더링을 매번 해버리기때문이다.

그래서 객체에 넣어서 스타일 주지말고 styled-component를 써줘야한다.

<div style={{ marginTop: 10 }}>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </div>

또는, sytled-component대신 useMemo를 사용해줘도 된다.

// 리렌더링되어도 같은 객체 유지
const style = useMemo(() => ({ marginTop: 10 }), []);

 

 

Signup page

회원가입 페이지에서 뷰를 만들어주고 엔트디자인의 Form을 이용해 입력값들을 받아준다. 이때 useState를 이용해 아이디, 닉네임, 패스워드 등의 입력값들을 아래와 같이 받아야하는데 딱봐도 중복된 코드들을 작성해줘야한다니 너무 번거럽다.

이런건 커스텀 훅을 만들어 사용해주면 훨씬 편하다.

훅 사용의 조건은 반복문, 함수, 조건문 안에서는 안되고 컴포넌트안에서만 되는데, 커스텀 훅은 예외이다.

일단 만들어보자.

// ../hooks/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];
}

만든 커스텀훅을 이제 이렇게 간단하게 사용할 수 있다. 

 

[[인프런 제로초님의 '리액트로 NodeBird SNS만들기' 강의를 보고 새롭게 공부한 내용을 정리하였습니다.]]