styled-components?CSS-in-JS 라이브러리 중 하나.컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각하자. 혹은 컴포넌트를 직접 만든다고 볼 수도 있겠다.클래스 이름 짓기에서 자유로운 장점과 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적이다.CRA를 설치한 폴더를 VS Code에서 열고 아래 명령어를 입력해서 styled-components 패키지를 설치하자.yarn add styled-components설치가 다 되었으면, 컴포넌트에 적용시키기 위해 아래 코드를 입력해서 임포트해야한다.import styled from 'styled-components';styled-components는 아래와 같이 변수로 만들어서 사용할 수 있다. "\"는 작은 따옴표가 아닌 빽틱이다!con..

SASS, SCSSSASS와 SCSS는 둘다 CSS를 편하게 쓰도록 도와주는 도구이다.SCCS는 SASS의 3번째 버전에서 추가된 것인데, SASS의 모든 기능을 사용할 수 있고 CSS와 호환도 잘 된다!SCSSSCSS를 사용하기 위해서 node-sass 패키지와 다른 필요 패키치를 설치해야 한다.VSCode를 열고 리액트 프로젝트를 만들 폴더에서 bash로 터미널을 열어 아래 명령어로 설치하자.yarn add node-sass@4.14.1 open-color sass-loader classnamesSCSS 문법기본 문법은 CSS와 동일하지만 몇가지 편리한 문법들이 존재한다!https://sass-lang.com/documentation[Sass: Documentation위 링크는 SCSS 공식문서이다...

CSSReact에서 컴포넌트에 CSS 스타일을 적용하기 위해서 src 폴더에 아래와 같은 style.css 파일로 스타일을 정의하고 컴포넌트에서 불러와보자!style.css.App{ width: 100vw; min-height: 100vh; background-color: #eee; padding: 32px; box-sizing: border-box;}.container{ max-width: 350px; min-height: 80vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd;}.title{ col..

Component리액트를 레고에 비유하면 컴포넌트는 레고의 블록 하나를 의미한다!컴포넌트는 클래스형과 함수형이 있다. 원래는 생김새와 용도까지 달랐지만 리액트가 발전함에 따라 이제는 생김새만 다르다고 봐도 무방하다.아래와 같은 HTML 구조를 가진 페이지가 있다고 하자. ... ... ... ... 이 코드를 조각내면 아래처럼 나눌 수 있을 것이다. 조각 하나하나를 컴포넌트라고 부른다.container/>를 하나의 조각으로 나누면 너무 커서 재사용성이 떨어지기 때문에, 컴포넌트는 , 컴포넌트로 다시 나누었다. State..