풀스택 서버리스: 리액트, AWS, 그래프QL을 이용한 최신 애플리케이션 개발

86

풀스택 서버리스

/* src/Container.js */

import React from 'react'

const Container = ({ children }) => (

<div style={styles.container}>

{ children }

</div>

)

const styles = {

container: {

margin: '0 auto',

padding: '50px 100px'

}

}

export default Container

이제

Container

컴포넌트를 사용하여 스타일을 다시 작성할 필요 없이 애플리케이션 전체에

서 일관된 스타일을 적용할 수 있습니다. 다음은

Container

컴포넌트의 사용 예시입니다.

<Container>

<h1>Hello World</h1>

</Container>

Container

컴포넌트의 하위 항목은

Container

컴포넌트에 설정된 스타일과 함께 렌더링

됩니다. 이렇게 하면 한 곳에서만 스타일을 제어할 수 있습니다. 이후 스타일을 변경하려면

Container

컴포넌트만 변경하면 됩니다.

4.3.3

Public

컴포넌트

Public

컴포넌트는 단순히 경로 이름을

UI

에 렌더링합니다. 사용자는 로그인 여부와 상관없

이 접근할 수 있습니다. 이 컴포넌트에서는

Container

컴포넌트를 사용하여

Container

컴포