$$config title: [React] ★새 React 작업 시작법★Props, snippet 활용, Counter, Converter, Button 활용 keywords: - React $$ # VS code에서 새 React 작업 시작하는 법

- ① 작업을 시작할 폴더 열기
- ② 연 폴더의 주소창에 `cmd`입력
- ③ 아래 코드 입력 - npx create-react-app 폴더명

# 1. Props(Properties) - 변수 및 코드를 다른 파일에서 끌어다 쓸 수 있도록 하는 것. - 수업에서는 src 안에 'components' 폴더를 생성, 그 안에 Counter.jsx, Mybtn.jsx와 같은 파일을 만들고 그 안에 코드 작성. - App.jsx에서 components 안에 만든 각 파일을 불러와 사용, 가공하여 결과물을 완성시킴. - 사용자 정의 컴포넌트는 반드시 `대문자`로 시작해야함. - export는 파일명이랑 같지 않아도 되지만 export default ★★와 const(function) ★★는 같아야 함. - recoil을 추천 - [recoil 관련자료](https://mobicon.tistory.com/582) ---

# 2. Snippet - 기본 양식을 자동 완성시켜주는 확장프로그램 - 확장프로그램 reactjs code 설치 > 새로 만든 파일에 rsc 입력 후 Tab - → 기본 양식이 자동완성 됨. ---

# 3. props를 이용해 다양한 components 작성 ## 3-1. Counter ```js import React, { useState } from "react"; function Counter({ counter, setCounter }) { const addCounter = () => { setCounter(counter + 1); }; return (

{counter}번 클릭했습니다

); return; } export default Counter; ``` ## 3-2. Converter ```js import React, { useState } from "react"; function Converter({ counter }) { return (

{/* 삼항 연산자 */} {counter % 2 === 0 ? "짝수" : "홀수"}

); } export default Converter; ``` ## 3-3. MyBtn ```js import React from "react"; const MyBtn = ({ text, fontSize, isChecked, alertMsg }) => { return ( ); }; export default MyBtn; ``` # 4. 3번에서 작성한 파일을 종합하여 App.jsx에서 구동 가능하게 함. ```js import React, { useState } from "react"; import Counter from "./components/Counter"; import Converter from "./components/Converter"; import MyBtn from "./components/MyBtn"; const App = () => { const [counter, setCounter] = useState(0); return ( <>

); }; export default App; ``` # 5. 더 찾아보기
- Props : [관련링크](https://react.vlpt.us/basic/05-props.html) - useState() - onClick - isChecked - alertMsg - 삼항연산자