$$config title: ?Let's React keywords: - 메인 $$ # 1강~8강 ## 개요 - 프론트앤드 개발자가 아니라도 리액트는 배우는게 좋음. - 그러나 기술은 점점 쉬워짐 - 기술조합 쉽게 앱까지 가능 - 프로그래머스 자바스크립트 풀 것 ```js

``` - 세팅 자바스크립트 바벨 이너블 ## 시작 - document.getElementById("root"); - id가 root인 엘리먼트 찾아오기 --- ```js import React,{useState} from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; //함수이름 APP, ()는 매개변수. const App = () => { return ( <>

안녕하세요

); }; ReactDOM.render(, document.getElementById("root")); //App을 div 안에서 실행하겠다. //document.getElementById("root").innerHTML='ㅋㅋㅋ'; ``` - 리액트는 한글메뉴얼이 잘 되어있음 - 자습서 : React 시작하기 - 리액트 생활코딩 영상 시청 [CodePen Home 클래스로 원과 상자 만들기(리액트 장점. 태그를 한번 만들어서 계속 쓰기.) ](https://codepen.io/hiimyong/pen/gOxyJWq) [CodePen Home 클래스로 원과 상자 만들기(리액트에서 잘 안씀) ](https://codepen.io/hiimyong/pen/ZEJZNEb) # 9강 ~ 11강 ## 개요 - 리액트는 화면상 변수를 즉시 변환이 가능하다. - 강력한 기술 - 추천 영상 시청할 것 [CodePen Home REACT - 변화가 시작된 num. 더하기 빼기 즉시구현](https://codepen.io/hiimyong/pen/ExvzdKg) # 12~15강 ## REACT - 추가 기록버튼의 생성과 배열공간의 생성 및 리액트의 불변성 ```js import React,{useState} from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; //함수이름 APP, ()는 매개변수. const App = () => { console.clear(); //let recordedNum = null; //기록시킬 대상. 지역변수의 상태이다. //아래는 const App과 함께 생서 const [recordedNum, setRecordedNum] = useState(null);//인스턴스 변수형. const는 초기화시 이렇게 선언함. const [num,setNum] = useState(0); // setNum이란 공간을 통한 num 변수 지정 const [recordedNums, setRecordedNums] = useState([]);//인스턴스 변수형. 배열형으로 만든다 const saveRecord= () => { setNum(0); //아래와 같이 사용하면 안됨 // >> recordedNums.push(num); // >> setRecordedNums(recordedNums); // 기존 recordedNums에 새로운 num을 밀어넣어 갱신하여 하였음으로 리액트의 불변성 위반. // 무조건 넣고 싶으면 새로 만들고 기존 값은 ...으로 표현한다. setRecordedNums([...recordedNums, num]); //배열을 선언하고 선언된 배열 안에는 recordedNums이 올 것이다. //이는 num값을 활용하고, ...은 recordedNums에 원래 들어있던 기존 값을 띄우는 것이다. //기본방법은 아래임 }; const arr = [1,2,3]; const arr2 = [...arr]; const arr3 = [4, ...arr]; console.log(arr); console.log(arr2); console.log(arr3); arr3.push(5); // 리액트의 불변성 지키지 못하였음. console.log(arr3); //콘솔창을 확인해 볼 것 //리액트는 기존것을 사용하지 않는다. //리액트의 불변성. 항상 새로운 것을 만든다. ////////////////////////////////////////////////////////////// // onClick메소드는 클릭하면 setNum의 num을 1 증가시키게 하겠음. 기록시 해당 값 저장. return ( <>

숫자 : {num}

{recordedNum==null ? '기록된 숫자 없음' :

기록된 숫자 : {recordedNum}

}

{JSON.stringify(recordedNums)}

); //JSON.stringify는 해당하는 것에 대한 값이 무엇인지 문장으로 보여준다. }; ReactDOM.render(, document.getElementById("root")); //App을 div 안에서 실행하겠다. //document.getElementById("root").innerHTML='ㅋㅋㅋ'; //리로딩 ctrl + shift + 7 ``` ## REACT - map을 적용하기(16강) ```js import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const App = () => { const [recordedNums, setRecordedNums] = useState([]); const [num, setNum] = useState(0); const saveRecord = () => { if (num == 0) return; //만약 num이 0이면 리턴한다.(숫자가 0이면 기록이 안되게 막는다.) setNum(0); // 아래 2줄은 안됩니다.(불변성 위배) /* recordedNums.push(num);// 리액트의 불변성 지키지 못하였음. setRecordedNums(recordedNums); */ //리액트는 기존것을 사용하지 않는다. //리액트의 불변성. 항상 새로운 것을 만든다. // 기존 recordedNums에 새로운 num을 밀어넣어 갱신하여 하였음으로 리액트의 불변성 위반. // 무조건 넣고 싶으면 새로 만들고 기존 값은 ...으로 표현한다. setRecordedNums([...recordedNums, num]); //배열을 선언하고 선언된 배열 안에는 recordedNums이 올 것이다. //이는 num값을 활용하고, ...은 recordedNums에 원래 들어있던 기존 값을 띄우는 것이다. //기본방법은 아래임 }; let recordedList =

기록없음

; // const는 값이 1회 들어가면 그 다음은 오류가 남 // let은 변수는 여러번 삽입이 가능 if (recordedNums.length > 0) //if 뒤에 써야할 것이 한줄이면 중괄호 생략 가능 recordedList = (

기록

{num}

); //맵에서 인덱스를 통해 고유한 값을 집어 넣으려고 할 때 (key) 무엇을 집어넣어야 할지 모르겠을때, //key={index}>{num} 이렇게 써줘야함. index에 다 다른 값이 들어가게 됨. 여기선 일단 배열의 키를 넣었음. //{recordedNums.map((num, index) => (

{num}

))} //map은 맵핑한다 라고 할 때 맵이다. //맵은 새로운 배열 //맵핑은 로직을 가미하여 새 배열에 복사 return ( <>

숫자 : {num}

{recordedList} ); }; ReactDOM.render(, document.getElementById("root")); ``` ## REACT - map을 적용해서 처음부터 만들기 ```js import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const App = () => { const [number, setNumber] = useState(0); const [numbers, setNumbers] = useState([]); const hsaRecord = numbers.length > 0; const saveRecord = () => { if (number == 0) return; setNumber(0); setNumbers([...numbers, number]); }; const RecordList = hsaRecord ? (

{number}

) : (

기록없음

); return ( <>

숫자 : {number}

{RecordList} ); }; ReactDOM.render(, document.getElementById("root")); ``` ## REACT - 모듈화 ```js console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const RecordForm = ({ recordedNums, setRecordedNums }) => { const [num, setNum] = useState(0); const btnDecreaseClicked = () => { const newNum = num - 1 > 0 ? num - 1 : 0; console.log("btnDecreaseClicked.newNum : " + newNum); setNum(newNum); }; const btnIncreaseClicked = () => { setNum(num + 1); }; const btnCancelClicked = () => { setNum(0); }; const saveRecord = () => { if (num == 0) return; setNum(0); setRecordedNums([...recordedNums, num]); }; const clearRecords = () => { setNum(0); setRecordedNums([]); }; return (

숫자 : {num}{" "} {" "}

{" "}

); }; const RecordList = ({ recordedNums }) => { return (

{recordedNums.length == 0 ? ( 기록없음 ) : (

{recordedNum}

)}

); }; const RecordApp = () => { const [recordedNums, setRecordedNums] = useState([]); return (

{/* RecordForm({recordedNums:recordedNums, setRecordedNums}); */} {/* RecordList({recordedNums}); */}

); }; const App = () => { return ; // RecordApp(); }; ReactDOM.render(, document.getElementById("root")); // == App(); ```