[*]프로젝트 구조에 관하여

[pycraft114]

현재 구조 : Main Component( yet implemented) ''''Circle graph(yet implemented)/ ''''Line graph(yet implemented)/ ''''ListContainer ㄴ------->Volume Workout Container에 필요한 데이터들 state로 가지고 있을 뿐 아니라,각 컴포넌트마다 필요한 이벤트 헨들러들 또한 Contain하고 있어야한다. 문제는, ListContainer에서 소유하고있는 각종 데이터들(날짜, 무게, 횟수, 운동종류)은 Circle Graph , Line Graph 컴포넌트에서도 요구되는 데이터들이다. 현재와 같은 구조로 계속 짜려면 결국에는 Main 컴포넌트에서 Circle Line Graph 컴포넌트의 데이터 및 이벤트 핸들러와 Volume Workout Container 컴포넌트의 데이터 및 이벤트 핸들러또한 Contain하고 있어야한다. 구조를 Flux , Redux 패턴을 사용하여 구조 리팩토링이 요구된다. ''''''''Route path=(?) component = VolumeContainer ''''''''Route path=(?) component = WorkoutContainer ''''/ListContainer /Main Component

[pycraft114]

파일사이에 함수를 import할때 어떤 일이 일어나는지 알아 볼 것

[pycraft114]

Component와 Container 분리 시킬것**

재사용성을 고려했을때 그럴 필요성이 있을때 분리 시킬것 ***

[pycraft114]

<MainPage>(componentShouldUpdate === false)
    <Route path=(?) component = VolumeContainer/>

    <Route path=(?) component = WorkoutContainer>
        <DatePicker props-from-ListContainer /> 
        <SelectedWorkout/> (component accessing to store)
        <Selector props-from-ListContainer/> (component accessing state from ListContainer)
    </WorkoutContainer>

</MainPage>

DatePicker, SelectedWorkout, Selector을 각각 render하는 Container을 생성 했을때의 장점 :

1. 각각의 Container가, 각각 access하고 있는 state가 변화 하는것에 따라 , 각각 re-rendering 할 수 있다. 불필요한 re-rendering을 막을 수 있다. 전체를 감싸고 있는 ListContainer가 re-rendering되는 것이 아닌 각각의 Container을 re-rendering 할 수 있다는것.

2.(실질적으로 SelectedWorkout 컴포넌트와 DatePicker는 내 프로젝트에 있어서 재사용성이 없지만) Container에 따라, Container로 부터 받는 props를 통해 재사용성을 더 높일 수 있다. (ex,Container에 따른 다른 event handler를 컴포넌트에게 부여할수 있다.)

전의 구조

<MainPage>(componentShouldUpdate === false)
    <Route path=(?) component = VolumeContainer/>

    <Route path=(?) component = WorkoutContainer>
        <DatePicker props-from-ListContainer /> 
        <SelectedWorkout access to selectedWorkouts from ListContainer by props/>
        <Selector props-from-ListContainer/> (component accessing state from ListContainer)
    </WorkoutContainer>

</MainPage>

Date Picker을 통해 store의 selectedWorkouts가 계속 변해도 ListContainer는 componentShouldUpdate가 false를 return함으로 re-redering 되지않는다. 그로인해 SelectedWorkout 컴포넌트는 가장 초기에 ListContainer가 렌더링 되었을때의 selectedWorkouts state만 props로 받는다 . 이후 유저가 date를 클릭하더라도 selectedWorkouts를 렌더링 하는 SelectedWorkout컴포넌트는 가장 초기에 받은 selectedWorkouts state만 렌더한다 (가장 초기값은 빈 array 임으로 아무것도 화면에 나타나지 않는다)

[pycraft114]

(*react는 state가 변하면 default로 child, parent component 모두 렌더하게끔 되어있다. 그래도 Container들을 잘 분리 한다면 shouldComponentUpdate 설정함으로써 위의 장점을 살릴 수 있다. )

[pycraft114]

<MainPage>
    <DoughnutGraph/>
    <List>
        <Route path=(?) component = VolumeContainer/>
        <Route path=(?) component = WorkoutContainer/>
    </List>
    <LineGraph>
</MainPage>