5일차
5-0
Create React App을 이용해 React 편리하게 시작하기
우리는 지금까지 cdn을 적용하는 방식으로 직접 react를 구축했지만, npm방식으로 react의 초기세팅을 편리하게 시작할 수 있다.
- nodejs 다운받기
- npx install
- npx create-react-app + 폴더이름 해주기 (원하는 폴더에 react를 셋팅해줌)
- npm run 으로 서버 시작
여기까지 했다면 완벽하게 react의 초기세팅이 잡히게 된다.
그 다음 스텝으로는 이 수업을 들을 때 필요한 파일들만 남겨놓는 작업을 한다.
위와 같이 App.js와 index.js만 남겨놓고 모두 삭제한다.
- App.js
function App() {
return (
<div>
<h1>Welcome back!</h1>
</div>
);
}
export default App;
- index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);두 파일 안에서도 복잡한 내용들은 다 제거를 하고 위와 같은 형태를 만들어준다.
서버에 위와 같은 화면이 뜨면 세팅 완료!
짧막한 후기
사실 이 수업 이전에도 npm 방식으로 react를 만들어본 적이 있었다.
그러나 그때는 아무것도 모른 채로 만들어서 초기세팅이 잡혀있는 상태의 react가 갖고 있는 파일들도 너무 많고, 소스들도 낯설어 살짝 겁이 나기도 했다.
니꼬의 수업은 row 단계부터 하나씩 쌓아올리는 느낌이라 지금 다시 npm 방식의 react를 마주쳤을 때 감회가 새로웠다.
npm이 어떤 식으로 react를 구성해줬는지 조금은 보였기 때문이었다.
5-1
실습을 통한 CRA 살펴보기
- 분할된 컴포넌트
화면에 버튼 하나를 띄울거다.
먼저, src 안에 Button이라는 이름의 js 파일을 만들어준다.
function Button({ text }) {
return <button>{text}</button>;
}
export default Button;배웠던 것과 똑같다.
Button이라는 이름의 함수를 만들어준 뒤에 props로 text를 받아와서 이것을 button의 value값으로 띄워줄 것이라는 소스다.
export default Button; 이 부분은 App.js에서 쓰기 위해 처리해주는 부분이다.
import Button from "./Button";
function App() {
return (
<div>
<h1>Welcome back!</h1>
</div>
);
}
export default App;App.js에 import Button from "./Button"; 이렇게 Button 컴포넌트를 import 해준다.
- 개발자에게 친절한 에러로그
이때, 터미널에 이런 경고문이 뜬다. Button 컴포넌트를 import 해왔으나 사용하지 않고 있다는 경고다.
이런 친절한 에러로그가 CRA의 장점이다.
- props 안내 기능
Button 컴포넌트를 추가하고 그 위에 마우스를 대보면 이렇게 무슨 props가 요구되는지 알려주는 기능도 있다.
import Button from "./Button";
function App() {
return (
<div>
<h1>Welcome back!</h1>
<Button text={"Continue"} />
</div>
);
}
export default App;
text에 "Continue"를 설정해주면 무사히 button value값으로 들어간 모습을 확인할 수 있다.
- CRA에서 proptypes 사용하기 (feat.yarn)
CRA에서 proptypes를 사용하려면 역시나 npm을 통한 설치를 거쳐야한다.
나같은 경우에는 자꾸 에러가 나서 따로 yarn을 사용해서 설치를 했더니 무사히 적용됐다.
참고로 yarn은 npm과 똑같은 js의 패키지 매니저이다. npm의 보안, 성능 문제를 개선했다고 한다.
npm install --global yarn
yarn add prop-types
위 코드를 터미널창에 입력하면 proptypes를 사용할 수 있다.
import PropTypes from "prop-types";
function Button({ text }) {
return <button>{text}</button>;
}
Button.propTypes = {
text: PropTypes.string.isRequired,
};
export default Button;
proptypes를 사용한 모습이다.
- css 입히기
css 파일을 만들어준 뒤에
button {
color: white;
background-color: tomato;
}css를 작성해준다.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);그리고 index.js에 import로 추가해주면 무사히 css가 적용된다.
- 개별 css 적용하기
import PropTypes from "prop-types";
function Button({ text }) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
}}
>
{text}
</button>
);
}
Button.propTypes = {
text: PropTypes.string.isRequired,
};
export default Button;
위 처럼 요소에 직접 css를 줌으로써 개별적으로 css를 적용할 수도 있다.
그러나 react에서는 좀 더 나은 방법을 적용할 수 있다.
- css module 적용하기
Button.module.css 파일을 만들어준다.
.btn {
color: white;
background-color: tomato;
}위처럼 클래스로 css를 준다.
import PropTypes from "prop-types";
import styles from "./Button.module.css";
function Button({ text }) {
return <button className={styles.btn}>{text}</button>;
}
Button.propTypes = {
text: PropTypes.string.isRequired,
};
export default Button;사용할 js 파일에 import를 시킨 뒤 props를 불러오듯이 class를 불러와서 적용시켜주면 끝!
이 방법의 엄청난 장점은 react가 알아서 class명을 부여해준다는 것이다.
개발자 도구에서 요소를 클릭해 들어가보면 button의 class 값이 랜덤값으로 정의되어있는 것을 볼 수 있다.
이로써 react에서는 그동안 css 작업을 할 때 귀찮았던 class명 문제에서 완전히 벗어날 수 있다!
import Button from "./Button";
import styles from "./App.module.css";
function App() {
return (
<div>
<h1 className={styles.btn}>Welcome back!</h1>
<Button text={"continue"} />
</div>
);
}
export default App;심지어 새로 만든 css 모듈의 class명이 Button에 쓰이는 class명과 동일해도
위처럼 react가 자동으로 class명을 설정해줘서 css가 잘 적용된다.
이제는 class명을 일일이 외울 필요가 전혀 없어진 것이다!
