$$config title: [블로그]?Let's React - 맵과 모듈화의 적용 keywords: - 리액트 - 맵 - 모듈화 $$ # ~ 24강 ## 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(); ```