[React] css in js

이전에도 styled component사용법을 포스팅한적 있지만,뭘 써놓은 건지 모르겠..😬아무튼 그래서 이번에는 내가 만들고 있는 페이지에 styled component를 이용하여 만들어보는 시간을 가져보자 !-!

css in js
CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다. 2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개하였습니다.

styled-components
기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다.

부끄럽지만 구상도이다... 피그마 써서 정성좀 쏟을 까 했는데 요근래 젭때문에 디자인 작업 너무 많이해서 이제 진짜 꼴도 보기 싫다 그냥 쓱쓱그렸다
이러면 내가 뭘 원하는지 다른사람 모르니까 결과 나왔을때 모르쇠 할 수 있어
오히려좋아 ~

자 이제 이 버릇없는 메인페이지를 예쁘게 꾸며보자잣

터미널에
npm i styled-components
를 입력하여 다운로드 먼저 해주기

import styled from 'styled-components';

다운로드 했으면 먼저 야무지게 임포트를 해주자

나는 전체화면이 노랑배경이길 원하기 때문에

#0A174E 약간 머스터드 색상인데 맘에든다 히히
아무튼 Wrapper랑 Button 컴포넌트를 만들고

요렇게 감싸기!

오예 귀요미 머스터드 등장

이런식으로 test 페이지 result 페이지 모두모두 하여


요렇게에 완성 !_!

다음편엔 netflify로 배포한 포스팅 들고오겠습니다아 ~!