modules, components, containers

module(액션 타입, 액션 함수가 있는 곳)이 하는 일은 

 

1. 기본적인 변수들을 포함한 객체를 정의한다.

2. 이 변수들의 값을 변화시킬 수 있는 함수들을 정의한다.

 

component가 하는 일은 사용자에게 보여지는 화면에 대한 정보를 가지게 된다.

 

container에서는 module 속에 자신이 필요한 변수들을 가져와서 onChange, onSubmit과 같은 함수들을 정의하게 된다. 하지만, 이 변수들의 값을 직접 변화시키는 일은 module의 redux function(?)이 하는 일이다. 따라서 onChange, onSubmit 속에 액션 함수들은 dispatch해서 원하는대로 기본적인 변수들의 값을 변화시킨다. 만든 onChange, onSubmit과 같은 함수들은 component에 보내 사용해서 화면을 rendering 하도록 한다.

 

제일 마지막에는 page folder의 page file이 container(container는 module을 자신의 입맛에 맞게 바꾸어 component에 보내준다.)를 호출해서 출력한다!

 

 const {form,auth, authError, user} =useSelector(({auth,user})=>({
        form:auth.login,
        auth:auth.auth,
        authError:auth.authError,
        user:user.user
    }));

container에서 module 속에 존재하는 자신이 필요한 변수들을 가져올 때는 이런 식으로 가져오게 된다.

 

useSelector가 module 속 auth.js, user.js 속에 존재하는 initialState 객체의 모습 그대로를 가져오게 된다. 그 객체 속의 변수들을 자신의 입맛에 맞게 넣어주면 된다.

 

결국, useSelector, useDispatch를 통해 module과 container가 소통하고, 이를 바탕으로 만들어진 결과물을 component에 보내 rendering 하는 순서이다.

 

항상 큰 틀을 잘 기억해야 이해가 빠르다!!!