> For the complete documentation index, see [llms.txt](https://conrad-maker.gitbook.io/nodebird/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://conrad-maker.gitbook.io/nodebird/front/untitled-2.md).
# Untitled
더미 데이터로 로그인하기
이번에는 로그인즉, 가짜로그인을 구현해보겠습니다.
먼저 LoginForm에 submit함수를 만들어주세요
```javascript
const onSubmitForm = useCallback(() => {
console.log(id, password);
setIsLoggedIn(true); //Props로 AppLayout에서 받아옵니다.
}, [id, password]);
```
{% hint style="info" %}
Ant-design에서는 onSubmit 대신 onFinish를 사용해
e.preventDefault 즉 새로고침을 막아줄 수 있습니다.
{% endhint %}
AppLayout.js도 바꿔줘야 겠죠?
```javascript
{isloggedIn ? : }
```
만약 로그인이 true면 프로필, false면 로그인창을 띄우는 화면입니다.
UserProfile.js 만들기
Ant-design의 Card를 이용해 유저 프로필을 만들어 보겠습니다.
Card는 정말 쓸모가 많으니 한번 구경다녀오세요
{% embed url="" %}
자, 그럼 이제 UserProfile 컴포넌트를 작성해볼까요
UserProfile 컴포넌트 만들기
```javascript
import React from "react";
import { Card, Avatar, Button } from "antd";
export default function UserProfile() {
return (
짹짹
0
,
팔로잉
0
,
팔로워
0
,
]}
>
CD} title="Conrad" />
);
}
```
Card에 관한 자새한 내용은 다룰것이 많아서 위에 개발자문서를 보면 이해할 수 있습니다.
이제 홈에서 로그인 버튼을 누르면?
이제 가짜로그아웃 기능도 구현해볼게요
```javascript
import React, { useCallback } from "react";
import { Card, Avatar, Button } from "antd";
export default function UserProfile({ setIsLoggedIn }) {
const onLogOut = useCallback(() => {
setIsLoggedIn(false);
}, []);
return (
짹짹
0
,
팔로잉
0
,
팔로워
0
,
]}
>
CD} title="Conrad" />
);
}
```
물론 Applayout에서 Props르 전달해줘야 하는걸 잊으면 안됩니다.
이번에는 프로필 페이지를 구성해볼까요?
프로필 페이지는 다음과 같이 구성되어있습니다.
```javascript
import React from "react";
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import FollowList from "../components/FollowList";
import NicknameEditForm from "../components/NicknameEditForm";
export default function profile() {
//가짜 데이터
const followerList = [
{ nickname: "conrad" },
{ nickname: "Roo" },
{ nickname: "boo" },
];
const followingList = [
{ nickname: "conrad" },
{ nickname: "Roo" },
{ nickname: "boo" },
];
return (
프로필 | NodeBird
//닉네임 수정 컴포넌트
//목록 컴포넌트 2개
);
}
```
다음은 간단한 NicknameEditForm.js부터 만들어볼까요?
```javascript
import React, { useMemo } from "react";
import { Form, Input } from "antd";
function NicknameEditForm() {
const style = useMemo( //useMemo를 통한 리랜더링 최적화
() => ({
marginBottom: "28px",
border: "1px solid #d9d9d9",
padding: "30px",
}),
[]
);
return (
);
}
export default NicknameEditForm;
```
다음은 복잡할수도 있는 리스트입니다.
```javascript
import React from "react";
import { List, Button, Card } from "antd";
import { StopOutlined } from "@ant-design/icons"; //아이콘은 용량이 크기 때문에 따로있다.
export default function FollowList({ header, data }) {
return (
{header}} //헤더
loadMore={ //더보기 버튼이 있는 컨테이너
}
bordered
dataSource={data} //props로 전달받은 데이터
renderItem={(item) => ( //데이터의 아이템들을 통해 map함수와 같은 개념
]}>
)}
/>
);
}
```
{% hint style="info" %}
보면 복잡해보일수도 있지만 Ant-Design 공식문서에 다 나와있는 내용들입니다.
머리에 외울필요 없이 문서 보면서 쓰고싶은 부분만 가져다가 쓰면 되는 것이죠.
{% endhint %}
결과물을 한번 볼까요?
다음에는 커스텀 훅을 이용한 회원가입 페이지를 만들어 보겠습니다.
먼저 컴포넌트입니다.
```jsx
회원가입 | NodeBird
```
ant-design이기 때문에 자세한 언급은 안하겠습니다.
다음으로는 input의 상태값을 관리해줄건데요
input이 많기 때문에 useState를 여러번 사용해줘야 할것 같습니다.
```jsx
const [id, setId] = useState("");
const [password, setPassword] = useState("");
```
하지만 이런식으로 모두 작성하는 것은 비효율적입니다.
해결방법은 두가지가 있는데요
1. 커스텀 훅을 만들어 사용하기
2. useState자체로 해결하기
커스텀훅을 먼저 만들어 볼까요?
{% code title="useInput.js" %}
```jsx
import { useState, useCallback } from "react";
export default function useInput(initialValue = null) {
const [value, setValue] = useState(initialValue);
const handler = useCallback((e) => {
setValue(e.target.value);
}, []);
return [value, handler];
}
```
{% endcode %}
훅 안에서 change되는 값들을 상태로 바꿔준뒤 valuedhk 바꾸는 함수를 내보내는 형식입니다.
그렇다면 이렇게 구현할 수 있습니다.
```jsx
const [id, onChangeId] = useInput("");
const [nickname, onChangeNickname] = useInput("");
const [password, onChangePassword] = useInput("");
```
간단해지죠?
다음방법은 useState의 기본값을 객체로 만드는 방법입니다.
```jsx
const [inputs, setInputs] = useState({
id: '',
password: '',
nickname: ''
});
```
그뒤 값을 설정하는 함수를 구현해보면
```jsx
const { id,password ,nickname } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
```
자 둘다 좋은 방법이니 편한 방법을 쓰면 될 것 같습니다.
완성된 전체 코드를 보겠습니다.
```jsx
import React, { useCallback, useState } from "react";
import AppLayout from "../components/AppLayout";
import { Form, Input, Checkbox, Button } from "antd";
import Head from "next/head";
import styled from "styled-components";
import useInput from "../hooks/useInput";
const PasswordError = styled.div`
color: red;
`;
export default function signup() {
const [id, onChangeId] = useInput("");
const [nickname, onChangeNickname] = useInput("");
const [password, onChangePassword] = useInput("");
const [check, setCheck] = useState("");
const [passwordError, setPasswordError] = useState(false);
const [term, setTerm] = useState("");
const [termError, setTermError] = useState(false);
const onChangeCheck = (e) => {
setCheck(e.target.value);
setPasswordError(e.target.value !== password); //이부분이 달라서 못한다.
};
const onChangeTerm = useCallback((e) => {
setTerm(e.target.checked);
setTermError(false);
}, []);
//한번더 체크
const onSubmit = useCallback(() => {
if (password !== check) {
return setPasswordError(true);
}
if (!term) {
return setTermError(true);
}
console.log(id, nickname, password);
}, [password, check, term]);
return (
회원가입 | NodeBird
);
}
```
길긴 하지만 완성본도 볼까요
