항해 13일차
오늘은 반 정도 들었던 강의의 나머지를 다 들었다.
간략하게 보자면
State
State는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. State를 만들 때 useState()를 사용한다.
State를 사용한 예시를 보자면
import React, { useState } from 'react';
function GrandFather() {
const [name, setName] = useState("김할아"); // 이것이 state!
return <Mother grandFatherName={name} />;
}
// .. 중략 이런 코드를 볼 수 있다.
이 안에서 useState의 구조를 보자면,
const [ value, setValue ] = useState( 초기값 )여기서 value는 기본 상태이고 useState(초기값)은 value의 초기 값을 의미한다. 또한 setValue는 value를 변경할 수 있다.
불변성
메모리에 있는 값을 변경할 수 있는 것을 말한다, 자바스크립트의 데이터 형태 중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다.
즉 원시 데이터를 보면 let 변수1 = 1이라고 선언하면, 메모리에는 1이라는 값이 저장이 된다. 그리고 변수1는 메모리에 있는 1을 참조한다. 여기서 let 변수2 = 1라는 변수를 선언해보자. 이때도 메모리에 생성되어 있는 1이라는 값을 참조한다. 따라서 변수1과 변수2는 같은 메모리 값을 바라보고 있다.
하지만 원시 데이터아닌 값인 (객체, 배열, 함수)는 원시 데이터와 반대이다. . let obj_1 = {name: ‘lee’} 이라는 값을 선언하면 메모리에 obj_1이 된다.. 그리고 이어서 let obj_2 = {name: ‘lee’} 이라고 같은 값을 선언하면 obj_2라는 메모리 공간에 새롭게 저장이 된다.
즉 원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장한다. 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다. .
