#5.0~ 5.1
CRA(CREATE REACT APP)
Node.js를 이용해서 create-react-app을 만드는 방법을 공부해 볼거임
create-react-app을 사용한다면 수많은 스트립트들과 많은 사전설정들을 React에서 준비해줌.
일단 Node.js에서 Node.js를 다운받고, 밑에처럼 버전이 확인하면 설치된거임!
이제 npx create-react-app 폴더명 명령어로 React 폴더를 생성해주자!
npm start
- 설치가 완료되면 vs코드로 폴더를 열어줌
- 터미널을 열어서
npm start라고 명령어를 입력하면 됨
그럼 아래처럼 브라우저 새창으로 development server(개발용 서버)가 띄어짐!
초기 세팅
- 처음에는 파일이 많이 세팅되있는데 필요한 것만 남기고, 다 지워줌.
App.js와index.js만 남기고 다 삭제하기
- 필요없는 내용들을 삭제해줌.
Button 컴포넌트 생성
//Button.js
import propTypes from 'prop-types';
function Button({text}) {
return <button>{text}</button>
}
Button.propTypes = {
text: propTypes.string.isRequired,
}
// 외부로 export 하기 위한 코드
export default Button;
Button.js파일을 생성 후, Button컴포넌트를 만들어 주었다.- 외부로 export하기 위해서는
export default Button;를 작성해야함.
//App.js
import Button from "./Button";
function App() {
return (
<div>
<h1>Welcome back!!</h1>
<Button text={"Continue"} />
</div>
);
}
export default App;App.jsdiv태그 안에 Button 컴포넌트를 추가해줌
propTypes 다운받기
//Button.js
import propTypes from 'prop-types';
function Button({text}) {
return <button>{text}</button>
}
Button.propTypes = {
text: propTypes.string.isRequired,
}
// 외부로 export 하기 위한 코드
export default Button;
- 버튼 컴포넌트의 prop-types로 타입을 체크하기 위해
npm i prop-types명령어로 설치하고
import propTypes from 'prop-types'해준다. - CRA하기 전에 했던 것과 똑같은 코드를 쓰지만 setup(설치 및 초기설정)만 다름.
- 이렇게 자동완성 기능으로 여러가지 옵션을 선택할 수 있음.
CSS 적용하기
CSS에 관한 선택지를 가질 수 있는데
1. 외부 스타일 시트
한 개의 css파일(style.css)을 만들어서 index.js로 가서 import './style.css' 하는 방법
하지만 외부 스타일 시트를 사용하면, 내가 꾸미고 싶지 않은 button에도 스타일이 적용되서 React를 사용하는 이유가 없어짐. 그래서 pass~
2. 인라인 스타일
import propTypes from 'prop-types';
function Button({text}) {
return (
<button style={{
backgroundColor: "tomato",
color: "white",
}}>{text}</button>
);
}
Button.propTypes = {
text: propTypes.string.isRequired,
}
// 외부로 export하기 위한 코드
export default Button;- 컴포넌트 안에 스타일을 작성해주는 방법
- 하지만 이 방법도
<Button />이라는 컴포넌트를 쓰면 다 똑같은 CSS만 써야하는 제한성이 생김.
create-react-app으로 작업할 때의 포인트는 "분할하고" "정복하는" 것!
그럼 무슨 방법을 쓸 수 있을까? 바로 CSS modules 방법!
CSS 모듈화 시키기
Button.module.css파일을 생성해주고 위의 내용을 작성해줌.Button.js에 import 시켜줌
import styles from './Button.module.css'
className속성에 이런식으로 작성하게 되면 해당 클래스를 가진 버튼만 스타일이 지정됨
App.module.css파일을 생성해서 위의 내용 작성해줌.
className속성 작성함.
만약 .btn과 .title의 클래스명을 같게 해도
위에처럼 클래스명이 랜덤으로 주어지기 때문에 같게 해도 상관없음.
Frontend Developer