react nodeBird 1-2(로그인폼 만들기)

  NodeBird 왼쪽에 로그인 폼을 만들겁니다. 백엔드 없이 임시로 가상의 데이터(State)를 통해 작동이 잘되는지 확인할 수 있습니다. 

Components/AppLayout.js

  Component 디렉토리의 AppLayout.js의 가상의 데이터인 const [isLoggedIn, setIsLoggedIn] = useState(false); 를 만들고, { isLoggedIn ? <UserProfile /> : <LogInForm /> } 을통해 로그인 상태가되면 유저프로필이 나올 수 있게 코드를 작성합니다. 

또한, <LoginForm setIsLoggedIn={setIsLoggedIn} /> 로그인폼에서 setIsLoggedIn을 사용할 수 있게 작성해줍니다. 

Components/LoginForm.js

  AppLayout의 setIsLoggedIn을 props로 받아오기 위해 const LoginForm = ({ setIsLoggedIn }) => {... 으로 안에 작성해줍니다. 

  LoginForm에서 버튼을 submit하게되면 onFinish를 통해 setIsLoggedIn(true); 변경되는 코드를 작성합니다. AppLayout의 isLoggedIn가 true로 변경되면서 UserProfile 컴포넌트가 나올 수 있게 됩니다.

submit 할 때 onFinish를 통해서 코드를 작성하면 된다.

  antd에서는 htmlType="submit"을 하면 onFinish={onSubmitForm}가 e.preventDefault가 이미 적용된 상태에서 사용할 수 있습니다. 따라서, onFinish를 이용하여 코드를 작성하면 됩니다.

로그인을 하면 UserProfile로 넘어가는걸 볼 수 있다.