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

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

CSS React에서 컴포넌트에 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{ color: slateblue; text-align: cente..

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