$$config title: [블로그]?Let's React - 추가 기록버튼의 생성과 배열공간의 생성 및 리액트의 불변성 keywords: - 리액트 - 추가 기록버튼의 생성 - 불변성 $$ # 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 ```