e:I[86069,["6841","static/chunks/app/p/%5Bid%5D/page-4bec94ee790807ae.js"],"default"] f:T7c4,$$config title: [리액트] 리액트 기초 keywords: - IT - 리액트 $$ # 필수로 입력되어야 하는 코드 ## html ```html

``` - 리액트 코드를 담을 div 태그를 만들어준다 - id 필수 생성 --- ## js ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { return <>안녕하세요.; } ReactDOM.render(, document.getElementById("root")); ``` - console.clear(); - 코드펜으로 작업 할 경우 넣어주는 것이 좋다. ```js function App() { return <>안녕하세요.; } ``` - <> 는 jsx 문법의 시작과 끝을 의미 함. - <> 안에서 html 태그를 사용할 수 있음. - ```js ReactDOM.render(, document.getElementById("root")); ``` - ```js ``` 은 ```js ``` 와 같다. - 태그 안에 내용이 없으면 줄여서 입력 가능. - 앱을 실행시키는 코드이다. # 변수 ## 일반변수 ```js const num1 = 11; ``` - 수정 후 사용자가 직접 리로드 ## state 변수 ```js const [num1, setNum1] = useState(11); ``` - 수정 후 자동으로 리로드 - 변하는 값이 있다면 state 변수로 지정해 주는 것이 좋음 # .map ```js {nos.map((no,index) =>

{no}

)} ``` - 원본을 기반으로 복제본을 만듦 - nos.map은 nos 배열의 원소의 수 만큼 (no) 함수를 실행시킴 # 모든 배열 값 불러오기 ```js function App() { const [no, setNo] = useState(0); const [nos, setNos] = useState([]); // 배열 const save = () => { setNo(0); // ...nos == nos의 모든 배열 값 setNos([...nos, no]); }; }; ``` - nos는 값을 배열로 받음 - ```js [...nos] ``` 라고 적으면 배열의 원소를 일일히 적지 않아도 nos의 전체