React - Redux 기초

Redux란

---

Redux는 상태 관리를 위한 라이브러리입니다.
화면을 컴포넌트를 분할할 때 상태(state)를 어떻게 갖게 하는 것이 좋은지, 부모가 상태를 가진 아이는 부모의 지시(props)를 그대로 표시하면 알기 쉽다.

 

• Store
  상태(State)를 관리하는 오브젝트. 표시를 할 때는 Store에서 상태를 꺼내 실시한다.
  Redux에 의해 제공된다.
• State
  Store에 의해 유지되고 있는 애플리케이션의 상태.
• Action
  State를 변경하기 위한 요구.예를 들어 버튼 클릭에 의해 표시 상태를 바꾸는 것과 같은 요구가 Action이 된다.
  Redux에서 제공하는 dispatch 함수에 의해 Store로 보내진다.
• Action Creator
  Action을 작성하기 위한 함수.
• Reducer
  현재 State와 Action을 받고 새로운 상태를 반환하는 함수.

 

Action과 Action Creator

---

Action

Action은 Store로 송신(dispatch)하는 State의 변경 요구입니다.Action은 구체적으로는 객체입니다. type 속성에서 Action의 종류를 지정합니다.type 이외의 속성은 자유롭게 설정할 수 있습니다

{
    type: ADD_POST,
    text: "안녕하세요"
}

위의 Action(객체 리터럴)에서는 type 속성으로서 ADD_POST라고 쓰고 있는데, 이것은 「문자열을 설정한 상수」입니다.다른 모듈에서 사용할 수 있도록 export 해놓겠습니다.

export const ADD_POST = "ADD_POST";

Action Creator

Action Creator는 이름 그대로 'Action 작성하기' 함수입니다.Action은 위에서 설명한 것처럼 단순한 객체이지만 함수를 준비함으로써 '무엇을 하고 있는가'를 보다 쉽게 이해할 수 있습니다.

export function addPost(text) {
    return {
        type: ADD_POST,
        text: text
    };
};

 

State

---

 

State는 React의 state와 마찬가지로 애플리케이션 상태를 나타내는 객체입니다.Redux에서는 하나의 객체에 애플리케이션의 전체 상태를 저장합니다.

{
    posts: [
        {datetime: "2020-01-20 16:00:00", text: "안녕하세요."},
        {datetime: "2020-01-20 16:01:00", text: "Redux"}
    ]
}

Reducer

---

Reducer는 현재 State와 dispatch된 Action에서 새로운 State를 다시 작성하고 반환하는 함수입니다.

function reducer(state, action) {
    // state와action으로부터 newState를 작성
    return newState;
}

Reducer를 구현할 때는 다음 사항을 주의해야 합니다.

 

• 인수를 변경해서는 안 된다(인수로 현재의 State가 전달되지만 그것을 직접 변경해서는 안 된다).
• 부작용을 수반하는 처리를 해서는 안 된다.부작용이란 새로운 State를 작성하는 것 이외의 처리 전부입니다.구체적으로는 Web 서버와의 통신을 실시해서는 안됩니다.
• 순수(pure)하지 않은 함수를 호출해서는 안 된다.순수하지 않은 함수란 new Date() 등을 부를 때마다 값이 바뀌는 함수입니다.

// 제일 처음은 state에 undefined가 건네진다. 그 경우, []가 state에 설정된다. 
function posts(state = [], action) {
    // Action의type으로 조건분기
    switch (action.type) {
        case ADD_POST:
            // 인수의 state를 변경하지 않고 새로운 state를 만들어 반환할 필요가 있다.
            return state.concat({text: action.text});
        // 신 기능을 반환하지 않으면 undefined가 되어버리기 때문에 default는 필요하다.
        default:
            return state;
    }
}

 

 

 

Presentational Component

---

Redux(정확하게는 react-redux)에서는 React의 컴포넌트를 다음의 세 종류로 나누고 있습니다.

• Presentational Component
  표시할 컴포넌트.이 컴포넌트는 props에서 전달되는 정보를 '그대로' 표시한다.
  ※presentation은 '제시'라는 뜻입니다.
• Container Component
  Redux에 "연결"하고 Redux에서 가져온 State를 이용하여 Presentational Component를 렌더링하는 컴포넌트(Presentational Component에 State를 props로 전달) 비동기 통신으로 서버로부터 데이터를 취득하는 Presentational Component와 Container Component의 관계 역시 '표시'와 '표시 데이터 관리'라는 관계가 됩니다.
• Other Component
  Presentational Component 혹은 Container Component에 '나눌 수 없는' 컴포넌트. 구체적으로는 폼이 해당된다.
  ※ Redux 문서에서는 "Other Component"라는 단어가 사용되고 있지만 의미적으로 이 텍스트에서는 더 이상 "혼재된 컴포넌트"라는 단어를 사용합니다.

Presentational Component를 작성해보자.

class PostList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.posts.map(
                    (post, i) => 
                        <li key={i}>
                            <span className="datetime">
                                {post.datetime}
                            </span>
                            {post.text}
                        </li>
                )}
            </ul>
        );
    }
}