React를 들어가며..

지금의 회사에서는 신기술을 사용하지 않고 오직 html,css,Javascript만으로 프론트를 다루고 있다. 항상 새로운 기술을 배우고 익히며 실전에 사용하는 것을 원하던 터라 팀장님께도 조심스레 건의를 드렸는데 신기술을 도입하여 적용하기에는 일단 시간이 부족하고, B2B 및 폐쇄적인 사이트들이라 과연 효율적일까 하는 의문들에서 막혀버렸다.
이에 굴하지 않고, 급변하는 분야에 자리해 있고 좀 더 효율적인 Front를 스스로 구축할 능력을 함양하고자 하는 마음으로 이 스킬을 배우고자 하는 게 나의 다짐이다.

사용 환경: Mac OS , iterm2, X code

+ my-react-app 프로젝트 셋업

npx create-react-app my-react-app

+ styled-components 설치

npm i styled-components

=> vscode에서 css자동 키워드 생성 기능이 없다면...
vscode-styled-components를 설치를 권장
(* 오타가 나서 아예 해당 객체가 보이지 않는 등의 오류를 겪으며 필요성을 느낌)

* 실제로 학습을 위해 사용하게 되는 파일은 아래와 같다.

index.js

App.js

@ div 개체에 Wrapper이라는 이름으로 display:flex 속성 값 부여

const Wrapper = styled.div`
  display:flex;
`;

@ Wrapper이라는 객체처럼 보이지만 실제로는 isplay:flex 속성 값을 가진 div

     <Wrapper></Wrapper>

@ Box 라는 객체 안에 span 객체에 대한 속성 값 및 span의 hover 효과에 대한 정의

const Btn = styled.button`
 color:white;
 background-color:tomato;
 border:0;
 border-radius:15px;
`;

@ Box객체의 속성 값을 상속 받은 Circle객체

const Circle = styled(Box)` 
 border-radius:50px;
`;

@ input객체에 대한 속성 값을 정의

const Input = styled.input.attrs({required:true, minLength:10})`
 background-color:green;
`;

->css와의 차이
✓ 중복되는 속성 값들을 하나로 묶어 일종의 객체로 선언하면 적용됨
✓ 여러개의 객체에 동일한 스타일 컴포넌트를 적용한다고 해도 실제로는 unique한 class, animation에 대한 이름 등이 생성되어 개별적으로 적용 되는 것을 볼 수 있음