$$config title: [React] CRA를 이용한 간단한 React.js 실습 keywords: - Prop & PropTypes - CSS $$ # 1. 각 컴포넌트를 파일형식으로 분리한 후 Prop사용 ## • src - 파일 생성하기 - button.js 생성 - button 컴포넌트 정의 ### button.js ~~~js function Button ({text}){ return ; } export default Button; // 위에 정의한 Button() 함수를 내보내기 함 -> App.js에서 import해서 사용할 예정 ~~~ --- ### App.js ~~~js import Button from "./button"; // 버튼 컴포넌트 import하여 사용 function App() { return (

Welcome~ React!

); } export default App; ~~~ ![cra_prop1](https://raw.githubusercontent.com/miruy/Blog_Img/2adb3e6ba55d401b0906ba86c86c08a56e624a38/cra_prop1.png) ### > 버튼 컴포넌트 생성 후 button.js에서 export / App.js에서 import하여 Prop사용 -> 화면에 버튼 생성 --- # 2. PropTypes 사용하여 체크하기 ## • VSC내 터미널 - npm i prop-types - proptypes install 하기 ## • PropTypes를 사용하고자 하는 컴포넌트에 install 된 PropTypes import하기 ## • PropTypes 사용하기 ### button.js ~~~js import PropTypes from "prop-types"; // import function Button ({text}){ return ; } Button.propTypes = { // 사용 text: PropTypes.string.isRequired, }; export default Button; // 위에 정의한 Button() 함수를 내보내기 함 -> App.js에서 import해서 사용할 예정 ~~~ # 3. CRA를 활용한 CSS 사용 방법 ## •Prop 기능을 이용하여 css 속성 적용 ### - 기본적인 css 사용방법 처럼 css코드를 정의한 파일 생성 후 사용하고자하는 컴포넌트에 해당 css파일 import하여 원하는 태그 내에 Prop로 사용 ### > cra는 css코드를 javaScript 코드로 변환해줌 ### > import로 독립된 각각의 css파일을 지정해주고, cra가 랜덤으로 className을 정하기 때문에 className이 중복되도 문제 없음 #### button.module.css ~~~js .btn { // css를 className으로 정의 color: white; background-color: tomato; } ~~~ #### button.js ~~~js import PropTypes from "prop-types"; import styles from "./button.module.css"; // 사용하고자 하는 css파일 import : import 사용하고자하는 변수 명 from "css파일 경로"; function Button ({text}){ return ; // Prop속성으로 사용 : style이라는 이름으로 import한 button.module.css의 .btn을 사용 } Button.propTypes = { text: PropTypes.string.isRequired, }; export default Button; ~~~ #### app.module.css ~~~js .title { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; color: blueviolet; font-size: 30px; } ~~~ #### App.js ~~~js import Button from "./button"; import style from "./app.module.css"; // css파일 import function App() { return (

Welcome~ React!

// title css 적용

); } export default App; ~~~ ![css1](https://raw.githubusercontent.com/miruy/Blog_Img/2adb3e6ba55d401b0906ba86c86c08a56e624a38/css1.png) --- ### 해당 코드 실습 시 발생한 에러! #### - Typo in static class property declaration react/no-typos #### - 해결방법 : PropTypes 사용 시 소문자로 사용하기 ##### ex : (컴포넌트 명).PropTypes{}; -> (컴포넌트 명).propTypes{}; #### 코드 ~~~js Button.PropTypes = { text: PropTypes.string.isRequired, }; ↓ Button.propTypes = { text: PropTypes.string.isRequired, }; ~~~ - 에러 참고 : [https://rok93.tistory.com/entry/Typo-in-static-class-property-declaration-reactno-typos-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%EB%B2%95](https://rok93.tistory.com/entry/Typo-in-static-class-property-declaration-reactno-typos-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%EB%B2%95) - 실습 참고 : 노마드 코더 - React JS로 영화 웹 서비스 만들기