[13일차] 주말 복습/ 실무형 폴더구조 container와 presenter/ props

0

TIL

목록 보기
14/21
post-thumbnail

react에서 컴포넌트를 정리하기 위한 폴더 구조 구성 방법이 대표적으로 두가지가 있다고 한다.

  • container / presenter 패턴
  • Atomic 패턴

아직 Atomic 패턴은 사용해 본 적이 없다. container / presenter 는 과제하면서 계속 사용하고 있어 간단하게 정리해본다.

*중간에 카피나 ori같은건 연습용 파일이니 무시하자

컴포넌츠 폴더 안의 각 폴더의 이름이 해당 페이지의 역할이다. boardlist는 게시판목록, 커멘츠는 댓글, detail은 상세 페이지 등.

파일명을 보면 .container/ .presenter/.queries/.styles이 있다. 내가 아직 안써본 부분도 많겠지만 현재까지는 이렇게 사용하고 있다.

  • container/
    기능 관련 내용을 넣는다.

    이런거.

  • presenter/
    UI가 들어간다.

  • queries
    api에서 확인한 내용

  • styles
    css 내용을 넣는다.


props

원래 한 파일에 모든 내용들을 다 넣어버릴 땐 이 기능이 필요가 없다. 그러나 위처럼 여러 파일로 나눈 경우. container에서 작성한 기능을 presenter의 css에 연결하기 위해서 사용한다.

container에서 텍스트 입력 시, 버튼 클릭 시 기능을 작성한 함수와, useState 사용한 error, useQuery로 불러온 data가 있다고 가정하자.

실제로 얘네는 presenter에, 즉 페이지 화면에서 입력 시, 버튼 클릭 시, 혹은 서버에서 읽어온 데이타를 화면에 나타내기 위한 것들이라 presenter파일과 연결이 되어야 한다. 이 4가지를 props 라는 객체 안에 넣어 presenter로 전달할 수 있다.

  • presenter에 앞의 4가지를 묶어 사용한 예시.


    props 라는 객체 안에 있기 때문에 {props.data.?}, {props.onChangeInput} 처럼 앞에 프롭스가 붙는다.

하루 후기

블로그 작성이 너무 밀려 집에서 자기 전에 작성중이다. 해야할 게 많으며 혼자 문제를 해결하는 능력이 부족하다. 그래도 조금씩 혼자서 해결할 수 있는 비중을 점차 늘려가는 걸 목표로 해야겠다.

질문도 적극적으로 하자.

profile
코린이의 코딩 성장기

0개의 댓글