react componets styled

components styled

npm install --save styled-components (yarn에서도 다운가능)
vscode-styled-components 라이브러리 다운 ( 자동완성) 
import styled from 'styled-components';

const Title = styled.h1`
  font-size:1.5em;
  text-align: center;
  color:palevioletred;
';

function App() {
  return (
  <div>
    <Title}>안녕</Title>
  </div>
 );
}

★ componets styled 를 사용하면 좋은이유

src>components>Footer.js파일생성
//하나의 컴포넌트를 생성(재사용)

//styled-components => js파일과 css파일 관리!!
const FooterList = styled.div`
  border:1px solid black;
  height:300px;
`;

const Footer =() => {
  return (
   <FooterList>
     <ul>
       <li>오시는길 : 서울 강남구..</li>
       <li>전화번호 : 020222</li>
     </ul>
   </FooterList>
  );
};

export default Footer;

이렇게 components 폴더에 여러개의 컴포넌트 (js파일) 들을 만들어서 관리한다.

다음, src > pages 폴더 생성 > LoginPage.js 를 만든다.
LoginPage.js에는
const LoginPage =() => {
  return (
    <div>
       <Header />
       <Login />
       <Footer />
    </div>
  );
};

이고, App.js에는
function App() {
 return (
  <div>
    <LoginPage/> //이런 페이지를 만들어놓으면 된다.
  </div>
 );
}

또 Components 폴더에서는 Login 기능이면
Login폴더를 하위에 생성해서 login.js를 넣어 관리하고, Footer.js나 Header.js는 공통이기 때문에 그냥 둔다.