CRA, CSS 기초
1. 리액트란
2. create-react-app
3. 리엑트 작성 방법 결정하기
1. 리액트란
- 앵귤러가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공한다. 따라서 전역 상태 관리나 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다.
- 가상돔 : 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영 해주는 기술
- 리액트와 같은 프레임워크나 라이브러리를 사용하는 가장 큰 이유 : UI를 자동으로 업데이트
2. create-react-app
1) 프로젝트 만들기
$ npx create-react-app {PROJECT NAME}$ yarn create react-app my-app2) scripts 명령어 종류
- package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},-
start : 개발모드로 실행할 때 사용
따라서 여러가지 최적화가 되지 않은 상태로 실행이 되기 때문에 배포할 때 사용하면 안된다. http로 실행 된다.
https로 실행하고 싶을 때는HTTPS=true npm start명령어 입력. -
build: 배포할 때 사용하는 명령어
빌드를 하게 되면 정적 파일이 생성된다. 서버에서는 이렇게 생성된 build 폴더 안에 있는 내용들을 정적 파일로 서비스만 하면 된다.
별도로 서버에 애플리케이션을 실행을 하지 않기 때문에 서버사이드 렌더링으로 동작할 수 없는 것이다.
로컬에서 정적 파일을 서비스 하기 위해서 serve 패키지를 사용하고 build 폴더를 대상으로 정적 파일을 서비스한다. react developer tools 크롬 익스텐션을 이용해서 실행된 페이지가 배포용 파일로 실행 된 것이라는 것을 알 수 있다.npx serve -s build -
test
npm test: 테스트 실행 명령어
기본적으로App.test.js파일이 있는데 이 파일 명을App.spec.js로 변경해도 테스트가 잘 된다.
__tests__라는 폴더를 만들면 이 폴더 밑에 있는 모든 파일이 테스트 파일이 된다.
하지만 폴더로 관리하는 것 보다는.test.js라는 이름으로 관리하는 게 좋다고 생각하는데, 그 이유는 테스트 하려는 파일이랑 붙어 있으면 여러모로 관리하기가 편리하기 때문. -
eject:
react-scripts를 사용하지 않고 모든 설정 파일을 추출하는 명령어
CRA를 기반으로 직접 개발 환경을 구축하고 싶을 때 사용
추출하지 않으면 CRA의 기능이 추가됐을 때 단순히 react-scripts 버전만 올리면 되는데 추출을 하면 수동으로 설정 파일을 수정해야 하는 단점이 있다. 따라서 꼭 필요한 경우가 아니라면 관리를 위해서 추출을 하지 않는 것을 추천.
3. 리엑트 작성 방법 결정하기
1) 일반적인 css파일 작성
- Button.css 파일과 Box.css 파일이 있고 각각의 파일에 같은 클래스명에 대한 스타일 정의가 되어 있다면, 원하는 결과가 나오지 않는다. 이것은 이름이 충돌해서 발생하는 것.
- 빌드를 해서 css 파일을 한 번 살펴보자. 모든 css 파일이 하나의 빌드 파일로 합쳐지기 때문에 이름이 충돌되고 나중에 선언된 속성이 적용되는 것이다.
2) css-module로 작성하기
- css-module을 사용하면 이름 충돌 문제를 해결할 수 있다.
- Box.module.css, Button.module.css 파일을 만든다.
- import 할 때는 객체 형식으로 내보내기 때문에 객체 형식으로 받아서 클래스명을 속성 이름으로 입력해준다.
import Style from './Button.module.css';
<button className={`${Style.button} ${Style.big}`}>큰 버튼</button>- Style 객체의 각각의 속성 값을 보면 뒤에 해시 값이 붙는다. 이 해시 값 덕분에 각 클래스 명은 고유한 이름을 부여 받게 된다. 따라서 이름 충돌 문제도 없게 된다.
- classnames 라는 모듈을 이용하면 더 간편하게 입력할 수 있다. (
npm i classnames로 설치)
<button className={cn(Style.Button, Style.big)}>버튼</button>
<button
className={cn(Style.Button, {
[Style.big]: isBig,
[Style.small]: !isBig,
})}
>
{isBig ? '큰 버튼' : '작은 버튼'}
</button>
3) styled-components로 작성하기
- css-in-js : css 코드를 js 파일 안에서 작성하는 방식이다.
- 동적으로 css 코드로 작성하기 쉽다. 자바스크립트로 다 관리할 수 있기 때문.
$ npm i styled-components - 예시
import React from 'react';
import styled from 'styled-components';
const BoxCommon = styled.div`
height: 50px;
backgrouhnd-color: #aaaaaa;
`;
const BoxBig = styled(BoxCommon)`
width: 200px;
`
const BoxSmall = styled(BoxCommon)`
width: 100px;
`
export default function Box({ size }) {
if (size === 'big') {
return <BoxBig>큰 박스</BoxBig>;
} else {
return <BoxSmall>작은 박스</BoxSmall>;
}
}const BoxCommon = style.button`
width: ${props => (props.isBig ? 100 : 50)}px;
height: 30px;
background-color: yellow;
`;
export default function Box({ size }) {
const isBig = size === 'big';
const label = isBig ? '큰 버튼' : '작은 버튼';
return <BoxCommon isBig={isBig}>{label}</BoxCommon>;
}