19.12.06 section 컴포넌트 & {children}

폴더 구조
Components/Section.js
Routes/Home/HomePresenter.js

Section.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const Container = styled.div`
  :not(:last-child) {
    margin-bottom: 50px;
  }
`;

const Title = styled.div`
    font-size: 14px;
    font-weight: 600;
`;

const Grid = styled.div`
  margin-top: 25px;
`;

const Section = ({title, children}) => (
    <Container>
        <Title>{title}</Title>
        <Grid>{children}</Grid>
    </Container>
);

Section.prototype = {
    title: PropTypes.string.isRequired,
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ])
};

export default Section;

• HomePresenter 안에 사용될 컴포넌트 Section이라는 파일 작성
• {title} : 리액트의 props로 HomePresenter 에서 title="어쩌고" 어쩌고 값을 받는다
• {children} : 리액트의 props로 HomePresenter 에서 section 태그 사이의 값을 받는다

            <Section title="Now Playing">
            	// section.js에서 {children} 이 받을 값
                {nowPlaying.map(movie => movie.title)}
            </Section>

HomePresenter.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import Section from "Components/Section";

const Container = styled.div`
    padding: 0px 10px;
`;

const HomePresenter  = ({
    nowPlaying,
    upComing,
    popular,
    error,
    loading
}) => 
// 리턴 시작 
// loading 이 아니라면 ( ) 리턴
loading ? null : (
    <Container>
    	// nowPlaying 존재하고,
        // nowPlaying 갯수가 1 이상이면
        // Section 렌더링
        {nowPlaying && nowPlaying.length > 0 && (
            <Section title="Now Playing">
                {nowPlaying.map(movie => movie.title)}
            </Section>
        )}
        {upComing && upComing.length > 0 && (
            <Section 
                title="Upcoming Movies" 
                children={upComing.map(movie => movie.title)}
            />   
        )}
        {popular && popular.length > 0 && (
            <Section title="Upcoming Movies">
                {popular.map(movie => movie.title)}
            </Section>
        )}
    </Container>
);

HomePresenter.propTypes = {
    nowPlaying: PropTypes.array,
    upComing: PropTypes.array,
    popular: PropTypes.array,
    error: PropTypes.string,
    loading: PropTypes.bool.isRequired
};

export default HomePresenter;