다음으로 나오는 react-redux 관련 함수는 mapStateToProps() 함수입니다.
참고로 이 함수는 react-redux 라이브러리에서 제공하는 함수는 아니고, 개발자가 직접 구현해야하는 함수입니다.
함수 이름이 조금 길고 단어가 많이 등장해서 처음에는 조금 어렵게 다가올 수 있는데, 그 의미를 하나씩 뜯어보도록 하겠습니다.

먼저 앞에 나오는 map이라는 단어는 mapping의 줄임말이라고 보시면 됩니다.
mapping이라는 단어는 주어진 집합의 각 요소를 다른 집합의 하나 이상의 요소와 연결하는 작업 이라는 의미를 갖고 있습니다.
쉽게 말하면, 서로 다른 두 집합에 있는 요소들을 연결하는 작업이라고 할 수 있습니다.

그럼 이제 앞에서 나왔던 mapStateToProps() 함수의 이름을 펼쳐서 이렇게 쓸 수 있습니다.

Mapping state to props

이 문장을 그대로 해석하면 "state를 props에 매핑한다. 연결한다." 라는 의미로 해석할 수 있습니다.
여기서 state는 Redux의 state가 되고 props는 매핑할 리액트 컴포넌트의 props가 됩니다.

다시 모든 의미를 포함하도록 문장을 작성해보면 이렇게 쓸 수 있습니다.

Mapping Redux state to target React component props.

즉, mapStateToProps() 함수는 Redux state를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수입니다.
그리고 이 함수는 규격에 맞게 개발자가 직접 만들어야 합니다.

그럼 mapStateToProps() 함수는 어떻게 작성해야 하는지 살펴보도록 하겠습니다.

function mapStateToProps(state, ownProps?)

먼저 mapStateToProps() 함수의 파라미터는 state와 ownProps가 있습니다.

첫 번째 파라미터인 state로는 Redux Store의 전체 state가 전달됩니다.
Redux Store에는 state들이 State Tree라고 부르는 계층 형태로 구성되어 있기 때문에, 전체 state에서 연결할 컴포넌트에서 필요로하는 state만 추출해서 mapping시키면 됩니다.

그리고 두 번째 파라미터는 ownProps라는 이름의 optional 파라미터입니다.
optional이라는 것은 필수가 아닌 있을 수도 있고 없을 수도 있다는 의미이고, 보통 물음표를 사용해서 표시합니다.
ownProps는 이름의 의미 그대로 mapping시킬 타겟 컴포넌트가 갖고 있는 자체 props를 의미합니다.
ownProps를 이용해서 Redux Store에서 원하는 state만을 추출할 필요가 있을 때 사용하게 됩니다.

이렇게 호출된 mapStateToProps() 함수는 타겟 컴포넌트에서 필요로하는 state값만을 꺼내서 일반적인 JavaScript 객체 형태로 리턴해야 합니다.
여기서 리턴하는 객체가 바로 리액트 컴포넌트의 props로 전달되는 것이죠.

그럼 mapStateToProps() 함수를 사용하는 실제 예시 코드를 한 번 볼까요?

function mapStateToProps(state) {
    const { posts, comments } = state;

    return {
        posts: posts,
        comments: comments,
    }
}

이 코드는 간단하게 작성해본 mapStateToProps() 함수입니다.

보시는 것처럼, mapStateToProps() 함수는 Redux의 Root State를 파라미터로 받아서 Root State에서 원하는 state만을 추출한 뒤에 JavaScript 객체로 만들어서 리턴합니다.
여기에서는 posts와 comments 두 개의 state만을 추출해서 리턴하는 것을 볼 수 있습니다.

실제로 컴포넌트에서 사용하지 않을 state까지 과도하게 추출해서 전달하게 되면, 의도치않게 컴포넌트가 재렌더링 될 수 있기 때문에 성능에 지장을 줄 수 있습니다.
그래서 꼭 필요한 state만 추출해서 전달하는 것이 좋습니다.

function mapStateToProps(state, ownProps) {
    const { posts, comments } = state;

    const targetPost = posts.find((post) => {
        return post.id === ownProps.postId;
    });

    return {
        post: targetPost,
    }
}

다음 코드는 mapStateToProps() 함수의 두 번째 파라미터인 ownProps를 사용해서 state를 추출하는 예시 코드입니다.

여기에서는 여러 개의 post를 리턴하는 것이 아니라, ownProps에 들어있는 postId 값을 사용해서 posts에서 해당되는 아이디 값을 가진 post를 찾아내고 해당 post를 리턴하게 됩니다.

이런식으로 ownProps를 사용해서 Root State에서 원하는 State만을 추출할 수 있습니다.

이것은 mapStateToProps() 함수의 역할을 그림으로 나타내본 것입니다.
보시는 것처럼, mapStateToProps() 함수는 Redux Store에 들어있는 Root State에서 필요한 state만을 추출해서 컴포넌트로 매핑시켜줍니다.

그런데 이 mapStateToProps() 함수를 작성할 때는 꼭 지켜야 할 원칙이 있습니다.
그 원칙은 바로 컴포넌트에서 꼭 필요한 state만 추출해서 전달해야 한다는 것입니다.
Container Component는 매핑된 Redux Store의 State가 바뀔 때마다 재렌더링 됩니다.
그래서 실제로 컴포넌트에서 사용하지 않을 state까지 과도하게 추출해서 전달하게 되면, 의도치않게 컴포넌트가 여러번 재렌더링 될 수 있기 때문에 성능에 지장을 줄 수 있습니다.