AuthForm 컴포넌트를 작성합니다.

components/auth/AuthForm.js

import React from 'react';
import styled from 'styled-components';

/**
 * 회원가입 또는 로그인 폼을 보여 줍니다.
 */

const AuthFormBlock = styled.div``;

const AuthForm = () => {
  return (
    <AuthFormBlock>
      AuthForm
    </AuthFormBlock>
  );
};

export default AuthForm;

---

 

앞으로 컴포넌트를 만들 때는 styled-components로 스타일링할 것입니다. 이 책에서는 각 컴포넌트의 최상위 컴포넌트를 선언할 때 이름 뒤에 Block이라는 단어를 붙여 줄 텐데요. 보통 styled-components를 사용할 때 꼭 Block이 아니어도 Wrapper라는 단어를 붙이거나, 또는 이름 앞에 Styled라는 단어를 붙이기도 합니다. StyledAuthForm처럼 말이죠. 나중에 여러분이 프로젝트에서 styled-components를 사용할 때는 더 편한 네이밍 방식을 자유롭게 선택하여 이름을 지으세요.