이번주 React를 공부하면서 스터디원 분들과 노마드코더에서 진행하는 React-Challenge를 하고있다. 2주간 매일 주어진 과제를 제출하면 끝이다. 오늘은 styled-components에 관한 주제이길래 무엇인가 하고 찾아보면서 활용을 해보았다.
일단 styled-components에 대해서 오늘 처음 찾아보고 적용시켜 봤는데 정말 좋았던 점은 따로 className을 설정하지 않아도 된다는 것이었다. 그리고 css가 필요할 때 마다 적용시켜주기 때문에 기본적인 css문법만 알면 손쉽게 적용할 수 있었다.
시간날때 마다 선배기수분들 중에 프로젝트를 어떻게 했는지 찾아보는데, 구현 스택중에 styled-components 빠짐없이 들어가있었는데, 오늘 실제로 써보니 왜 쓰는지 이유를 알게되었다.
// 먼저 설치해준다.
$ yarn add styled-components
// 까먹지 말고 import 하자
import styled from 'styled-components';
위에 선행작업이 끝나면 본격적으로 시작할 수 있다.
// syntax
const {변수명} = styled.{태그이름} `
여기에 css 문법을 넣어준다.
`
// 예시
const Btn = styled.button`
background-color: transparent;
border: none;
font-size: 20px;
font-weight: 700;
color: black;
&:hover {
background-color: yellow;
color: white;
}
`;
export default () => (
<div>
<Btn>버튼</Btn>
</div>
);
이런식으로 className도 지을 필요없이 바로 css문법을 적용시킬 수 있어서 정말 좋았다!!
어제 H.A 시험을 보고 오늘 첫 Solo day 를 보냈다. 다음주부터 코드스테이츠에서 본격적으로 백엔드 스프린트가 진행된다. 그래서 아침부터 Redux공부를 해보았다. 지금 듣는 강의가 Redux부터 시작해서 DB, SQL 까지 이어지기 때문이다. 이야기만 들어보면 프론트엔드보다 백엔드가 더 재밌을 것 같은데.. 정말 어려운 분야라고들 하니까.. 지레 겁먹게 되긴 하겠지만.. 또 새로운걸 배운다고 생각하니 정말 설렘반 걱정반이다 ㅜㅜ
현재 심정은 스프린트가 다 끝나고 프로젝트 기간이 시작되면서, 팀원 4명을 만들어서 협업을 하면서 프로젝트를 해보고 싶은 생각뿐이다.
👊 내일의 TIW(today I Will)
React, Redux