React 사이드프로젝트[담벼락][1]

담벼락 프로젝트의 디자인패턴

나는 디자인패턴은 MVC, MVVM ...등등 백엔드쪽에만 있는줄알았다..

그런데 프론트에서도 디자인패턴이 있었구나??
노마드코더 니코쌤의 넷플릭스 클론코딩을 들으며 배웠던

presenter & container 디자인 패턴을 사용해보기로했다

presenter & container 디자인 패턴이란?

• 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴
• 같은 state를 다른 container에게 props 내림으로 상태를 공유할수있음
• 로직수행 마크업이 다른 컴포넌트에게 하기때문에 유지보수가 쉽고, 재사용성이 뛰어남

담벼락 프로젝트 소스코드에서 확인해볼수있다!

pages/users/SignIn 로그인 페이지를 확인해보자

SignIn이라는 디렉토리 안에

• index.js
• SignInContainer.js
• SignInPresenter.js
  파일 세개가 존재한다!!

밑에서 간단하게 왜 존재하는지 설명하겠다

index 컴포넌트

import SignInContainer from './SignInContainer'

export default SignInContainer

디렉토리와 container 컴포넌트를 연결시켜주는 역할을한다

container 컴포넌트

Presenter 컴포넌트에게 내려줄 props 로직을 구현하는 컴포넌트이다.
로그인에 관련된 컴포넌트이기때문에

로그인 버튼을 눌렀을때 일어날 액션에대해 함수를 정의했으며
input 태그에서 값이 변경될때의 값을 정해주는 로직을 정의했다.

return (
    <SignInPresenter
      handleSubmit={handleSubmit}
      setEmail={setEmail}
      setPassword={setPassword}
      pageInfo={pageInfo}
    />
  )

그후 Presenter컴포넌트에게 props를 내려준다

presenter 컴포넌트

Presenter 컴포넌트는 Container 컴포넌트에게 전달받은 props를 이용하여
변수를 재할당하며 마크업을 통해 ui를 정의하는 부분이다!

결과화면

다른 디자인패턴도 많은것으로 보였다.
VAC Design Pattern , Atomic Design Pattern -> 궁금할때 읽어보면 좋음 ㅎㅎ