04. State

State 만들기

: 컴포넌트 내부에서 바뀔 수 있는 값, 상태

: 앞에서 name이라는 정보를 const name="홍부인" 이라고 만들었는데, name 값이 바뀌어야하는 정보면 state로 생성해야 함

🔥 State 만들때는 useState() 사용

state를 만들어주는 useState는 React에서 제공하는 기능(=훅), React에만 존재

1. 먼저 const로 선언
2. [ ] 빈 배열 생성
3. 배열의 첫번째 자리에는 state 이름, 두번째 자리에는 'set'을 붙이고 state의 이름을 붙임
4. useState()의 인자에는 이 state의 원하는 초기값을 넣어줌

: 처음값 = 초기값 = initial state
: state는 언제든지 변할 수 있기 때문에 '처음값'이라는 개념이 존재

: import에 {useState} 추가해주기

State 변경하기

🔥 setValue(바꾸고 싶은 값)
: state 변경할때 사용하는 함수, 이걸로만 변경 가능

: Child 컴포넌트에 '할아버지 이름 바꾸기'라는 라벨을 가진 버튼 생성
: 버튼 눌렀을 때 setName 실행
: GrandFather에 있는 setName을 Child에 전달
-> 주고받고 주고받고 해서 전달
🔥 state는 새로고침하면 다시 초기값으로 바뀜. setstate로 바뀐값이 어디 저장되는 것이 아니라 화면상으로만 랜더링만 됨

🙋🏻‍♀️ 리액트 훅
🙋🏻‍♀️ 다른 훅 종류
🙋🏻‍♀️ const 는 변경할 수 없는 상수 인데, 어떻게 setState를 이용해서 값을 변경?
🙋🏻‍♀️ component lifeCycle

✅ useState + onClick Event

사용자가 웹사이트와 상호작용해서 어떤 상태를 변경시킬 수 있는 대표적인 사례 : input, button
-> input / button 에서의 useState 활용

버튼과 이벤트 핸들러 구현

: 어떤 버튼을 만들고, 그것을 클릭했을 때 state가 변경되기

: 버튼을 눌렀을 때 하고 싶은 행동을 함수로 만들기
-> React에서 함수와 컴포넌트(버튼) 연결하는 방법

1. 버튼 만들기
2. onClickHandler 함수 만들기 = 이벤트 핸들러
3. 2를 onClick={} 에 넣어주기

state 구현 후 이벤트 핸들러와 연결

: 버튼 누르면 state가 "길동이"에서 setName()의 값 "누렁이"로 바뀜

✅ useState + onChangeEvent

: input에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴을 많이 사용

input과 state 구현

: input 값을 넣을 value라는 state 생성
🔥 function 키워드 사용하지 않고 화살표함수 사용
(화살표 함수, function 키워드 모두 함수 컴포넌트 만들 수 있음)

이벤트핸들러 구현 후 state와 연결

: input과 value 연결

1. input에 onChange 이벤트 불러내기
2. 이벤트 핸들러 함수 넣기
3. 이벤트 핸들러 안에서 js event 객체 사용
4. 사용자가 입력한 input 값은 event.target.value로 꺼내 사용
5. value를 input의 속성인 value에 넣기

=> 사용자가 input에 값을 입력하면, 그 값을 입력할 때마다(onChange 될 때마다) value라는 state에 setValue해서 넣어줌
=> value를 콘솔에 찍으면 입력할 때마다 value가 바뀜

: 이 과정을 통해 사용자의 input값을 state로 관리할 수 있음
🔥 event 객체는 React 개념이 아닌 HTML DOM event의 개념

✅ 불변성

: 메모리에 있는 값을 변경할 수 없음
: js의 데이터 형태 중 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 데이터(객체, 배열, 함수)는 불변성이 없음

변수를 저장하면, 메모리에 어떻게 저장이 될까?

let number = 1

: 선언 시, 메모리에는 1이 저장됨
: number 변수는 메모리의 1을 참조

let secondNumber = 1

: 다른 변수 선언 시, 이미 메모리에 생성된 1을 참조
-> number와 secondNumber는 변수 이름은 다르지만, 같은 메모리값을 바라봄
=> number === secondNumber 는 true

let obj_1 = {name: ‘kim’}
(원시데이터가 아닌 데이터(객체, 배열, 함수))

: 메모리에 obj_1 저장

let obb_2 = {name: ‘kim’}

: obj_2라는 메모리 공간에 새롭게 저장
=> obj_1 === obj_2 는 false

데이터를 수정하면 어떻게 될까?

기존에 1이던 number에 let number = 2 새로운 값을 할당하면?
: 기존 메모리에 저장된 1이라는 값이 변하지 않고, 새로운 메모리 저장공간에 2가 생기고, number 이라는 값을 새로운 메모리 공간에 저장된 2를 참조하게 함
-> 원시데이터는 불변성이 있으므로

기존에 ‘kim’이던 name에 obj_1.name = ‘park’ 새로운 값을 할당하면?
: 기존 메모리 저장공간에 있는 {name: ‘kim’} 이라는 값이 {name : ‘park’} 으로 바뀜
-> 객체는 불변성이 없으므로

🔥 원시데이터 수정 시, 메모리에 저장된 값 자체를 바꿀 수는 없고 새로운 메모리 저장공간에 새로운 값을 저장
🔥 원시데이터가 아닌 데이터 수정 시, 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버림

왜 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시할까?

🔥 React에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인함
-> state가 변하면 리렌더링, 안변했으면 리렌더링 안함

state가 변했는지 안변했는지 확인하는 방법
: state의 변화 전후의 메모리 주소를 비교
=> 원시데이터가 아닌 데이터를 수정할 때 불변성 지켜주지 않음
=> 직접 수정하면 값은 바뀌지만 메모리 주소는 변함 없음
🔥 => 개발자가 값은 바꿨지만 React는 state가 변했다고 인지하지 못함 -> 리렌더링 못 일어남

React 불변성 지키기

배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고, 그 이후에 값을 수정하는 식으로 구현

🙋🏻‍♀️ onChange, onClick 외에 다른 이벤트
🙋🏻‍♀️ 원시 데이터 타입
: 숫자, 문자열, 불
🙋🏻‍♀️ 객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드들