반응형
Component Seperation
-
[React.js] Components SeperationFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 18:44
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 2 저번 포스팅에서는, React에서 사용하는 Inline Styles과, 객체를 변수에 저장하여 활용하는 방법을 공부했다. 이번엔, 랜딩페이지부터 세세한 컴포넌트까지 다양한 JS파일을 분할하는 패턴에 대해 다뤄보고자 한다. 📒 Presentational Component & Container Component 아래 코드는, 기니피그 제목 및 사진(5초마다 바꿈)을 표현하는 페이지이다. 여기서 표현을 위한 페이지(Parent, Container)에서 각각의 기능을 분할(Child, Presentational)하려고 한다. import React from 'react'; import ReactDOM from 'react-dom'; const GUINE..