[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -1

공부 순서

0.반응형 웹 이란?
1.react와 styled-components 사용해보기
2.media-query를 이용해 반응형 웹 적용 시켜보기
3. styled-components를 동적으로 사용해보기

---

반응형 웹이란?

세계적으로 온라인 시장이 활성화 되면서 pc중심이었던 온라인 서비스 시장이 휴대폰 태블릿 다양한 디바이스로 확대 되었습니다. 실제 pc인터넷 사용량보다 모바일 인터넷 사용량이 훨씬 많아진 지금 반응형 웹은 선택이 아닌 필수가 되었습니다. 모바일에서 컴퓨터 사이즈로 웹 사이트를 보게되면 짤려지거나, 사용하는데 불편함을 겪게되고 이를 해결하기 위해 PC, 모바일, 테블릿 등 각 기기별로 홈페이지의 페이지가 최적회 되어 보여지는 기능을 반응형 웹 이라고 합니다.

---

개발 환경 세팅

npx create-react-app responsive
cd responsive
npm i styled-components

먼저 네비게이션 컴포넌트를 하나 만들어 줍니다.

//Nav.js
import React from 'react';

function Nav() {
  return (
    <div>
      NavBar
    </div>
  );
}

export default Nav;

그후 App.js에 우리가 사용할 Nav 컴포넌트를 제외한 나머지는 다 삭제해 줍니다.

//App.js
import React from 'react';
import Nav from './Nav'
function App() {
  return (
    <div>
      <Nav/>
    </div>
  );
}

export default App;

자, 준비는 다 끝났습니다. 다음 게시글 부터 본격적으로 react와 styled-components를 활용한 반응형 웹 만들기를 시작하겠습니다.