현재 버전

개발할때 역할모델에 기반한 고민을 많이 하셔요.


모듈을 구조화 할때 어떤 모듈이 어떤 역할을 하게 할 것인지에 대해서 가장 많은 고민이 필요합니다.

역할을 잘 나누는 것이 가장 첫번째 이고 그 이후 구현단계에서 말씀하신 부분들을 고민하시면 될 거 같아요.

제가 볼때 글로 남겨주신 모듈의 역할은 다음처럼 변경하면 좀 더 효율적일 수 있을 거 같아요.




예를 들어 보죠


일단 개별 구성요소 컴포넌트는 최소한의 필요한 역할만 부여한채로 구성해봅니다.


Search component

- props

    - onSearch

- 역할

    - 키워드 입력 input 제공

    - 조회 버튼 제공

    - 조회 버튼 클릭시 onSearch(keyword) 호출


Grid component

- props

    - users (데이터)

- 역할

    - users 데이터를 렌더링


Pagination component

- props

    - totalPageCount

    - currentPage

    - pagePerBlock

    - onClick

- 역할

    - 페이지 번호 노출

    - currentPage 강조 노출

    - 이전/다음 버튼 등 제공

    - 페이지 번호 클릭시 onClick(pageNumber) 호출


그리고 이 개별 구성요소를 조합하여 기능을 구현할 User component의 역할은 이렇게 부여해보죠.


User component 의 역할 (각 모듈들을 활용하여 기능 구현)

- useState 사용

    - keyword data (setKeyword)

    - page data (setPage)

    - users data (setUserData)

- 내부 역할

    - useCallback으로 구현(deps는 keyword, page state를 설정하여 그 두 값이 변경되면 수행되도록 함)

        - keyword, page를 활용하여 api call

        - api 응답 성공시

            - setUserData(response data)

- 개별 구성요소에 props 전달

    - <Search onChange={setKeyword} />

    - <Grid users={users} />

    - <Pagination  onClick={setPage} totalPageCount={} currentPage={} pagePerBlock={} />


이렇게 구성을 하게되면

1. 각 컴포넌트의 역할이 단순해지고 그로 인해 각 컴포넌트간의 의존성이 최소화

    - Search 컴포넌트는 조회 버튼 클릭시 사용자가 입력한 키워드를 전달만 해주면 됨

    - Pagination 컴포넌트는 페이지 번호를 표현하고 페이지 번호 클리시 클릭된 페이지 번호를 전달만 하면 됨

    - Grid 컴포넌트는 Users 데이터를 렌더링만 함(페이지당 몇개인지 등과 같은 정보에 관심 없음)

        - 고도화 해서 필드정보도 같이 받아서 users 데이터의 포멧에 의존적이지 않도록 구성할 수 있음

2. 각 개별 컴포넌트를 조합하여 기능을 구현하는 User 컴포넌트에 비즈니스 로직 집중화

    - 데이터를 한곳에서 핸들링 할 수 있음

3. React.memo 등을 활용한 컴포넌트 re-render 최적화

    - React.memo는 props가 변경되지 않으면 컴포넌트를 re-render하지 않도록 하는 memoization 헬퍼

    - 즉 User 컴포넌트의 users 데이터가 바뀌어서 User 컴포넌트가 re-render 되어도 Search/Pagination 컴포넌트는 re-render 되지 않도록 Search/Pagination에 React.memo 적용

        


수정 이력

2021-01-18 13:56:08 에 아래 내용에서 변경 됨 #1

개발할때 역할모델에 기반한 고민을 많이 하셔요.


모듈을 구조화 할때 어떤 모듈이 어떤 역할을 하게 할 것인지에 대해서 가장 많은 고민이 필요합니다.

역할을 잘 나누는 것이 가장 첫번째 이고 그 이후 구현단계에서 말씀하신 부분들을 고민하시면 될 거 같아요.

제가 볼때 글로 남겨주신 모듈의 역할은 다음처럼 변경하면 좀 더 효율적일 수 있을 거 같아요.




예를 들어 보죠


일단 개별 구성요소 컴포넌트는 최소한의 필요한 역할만 부여한채로 구성해봅니다.


Search component

- props

    - onSearch

- 역할

    - 키워드 입력 input 제공

    - 조회 버튼 제공

    - 조회 버튼 클릭시 onSearch(keyword) 호출


Grid component

- props

    - users (데이터)

- 역할

    - users 데이터를 렌더링


Pagination component

- props

    - totalPageCount

    - currentPage

    - pagePerBlock

    - onClick

- 역할

    - 페이지 번호 노출

    - currentPage 강조 노출

    - 이전/다음 버튼 등 제공

    - 페이지 번호 클릭시 onClick(pageNumber) 호출


그리고 이 개별 구성요소를 조합하여 기능을 구현할 User component의 역할은 이렇게 부여해보죠.


User component 의 역할 (각 모듈들을 활용하여 기능 구현)

- useState 사용

    - keyword data (setKeyword)

    - page data (setPage)

    - users data (setUserData)

- 내부 역할

    - useCallback으로 구현(deps는 keyword, page state를 설정하여 그 두 값이 변경되면 수행되도록 함)

        - keyword, page를 활용하여 api call

        - api 응답 성공시

            - setUserData(response data)

- 개별 구성요소에 props 전달

    - <Search onChange={setKeyword} />

    - <Grid users={users} />

    - <Pagination  onClick={setPage} totalPageCount={} currentPage={} pagePerBlock={} />


이렇게 구성을 하게되면

1. 각 컴포넌트의 역할이 단순해지고 그로 인해 각 컴포넌트간의 의존성이 최소화

    - Search 컴포넌트는 조회 버튼 클릭시 사용자가 입력한 키워드를 전달만 해주면 됨

    - Pagination 컴포넌트는 페이지 번호를 표현하고 페이지 번호 클리시 클릭된 페이지 번호를 전달만 하면 됨

    - Grid 컴포넌트는 Users 데이터를 렌더링만 함(페이지당 몇개인지 등과 같은 정보에 관심 없음)

        - 고도화 해서 필드정보도 같이 받아서 users 데이터의 포멧에 의존적이지 않도록 구성할 수 있음

2. 각 개별 컴포넌트를 조합하여 기능을 구현하는 User 컴포넌트에 비즈니스 로직 집중화

    - 데이터를 한곳에서 핸들링 할 수 있음

3. React.memo 등을 활용한 컴포넌트 re-render 최적화

    - React.memo는 props가 변경되지 않으면 컴포넌트를 re-render하지 않도록 하는 memoization 헬퍼

    - 즉 User 컴포넌트의 users 데이터가 바뀌어서 User 컴포넌트가 re-render 되어도 Search/Pagination 컴포넌트는 re-render 되지 않음