24.2.1 UI 준비하기

나중에 리덕스를 사용하여 컨테이너 컴포넌트를 만들고 상태 관리도 하겠지만, 지금 당장은 상태에 대해서는 신경 쓰지 않고 오직 UI만 개발하겠습니다.

프레젠테이셔널 컴포넌트들은 components 디렉터리에 작성하고, 그 안에 기능별로 디렉터리를 새로 만들어서 컴포넌트를 분류할 것입니다. 앞에서 Button 컴포넌트를 common이란 디렉터리에 만들었는데, 이미 설명했듯이 Button 컴포넌트는 여기저기서 재사용되는 컴포넌트이므로 common 디렉터리에 넣은 것입니다. 회원 인증에 관련된 컴포넌트는 회원 인증 페이지에서만 사용되기 때문에 auth라는 디렉터리를 만들어서 그 안에 작성하겠습니다. 이 외에도 글쓰기에 관련된 컴포넌트는 write라는 디렉터리에 작성하고, 포스트 읽기에 관련된 컴포넌트는 post 디렉터리에 작성할 것입니다.

회원가입과 로그인 기능을 구현하기 위해 만들어야 할 프레젠테이셔널 컴포넌트는 두 개입니다. 먼저 다음 파일들을 생성해 주세요. 각 컴포넌트의 역할이 무엇인지는 주석에 간략하게 적혀 있으니 주석도 꼼꼼히 읽어 주세요.