22년 12월 2주차 WIL

React

useState()

• useState를 통해 컴포넌트에서 바뀌는 값을 관리할 수 있다.
• Hook 기능 중, 하나이다.
• 컴포넌트의 state를 간편하게 생성하고 업데이트 시킬 수 있게 해주는 도구

const [state, setState] = useState(초기값)

위 처럼 state의 생성과 동시에, 가져야 할 초기값을 useState함수의 인자로 넣어준다. 그러면 state와 setState라는 두 요소를 배열 형태로 반환해줌.

---

리액트에서는 map을 사용해서 컴포넌트를 반복렌더링 할 때, 반드시 컴포넌트의 key를 넣어줘야한다.

Why?

• 리액트에서 컴포넌트 배열을 렌더링할 때, 각각의 원소에서 변동이 있는지 알아내려고 key를 사용하기 때문.

Q. 만약, key 없이 리액트는 가상DOM을 비교하는 과정은?

A. 배열을 순차적으로 비교하면서 변화를 감지하려 한다. key가 있음으로써 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게 된다.

=== key값을 넣어줘야, 리액트의 성능이 최적화된다.
key는 props처럼 생겼지만, props로 설정 안해줘도 key를 넣을 수 있음.

---

map에서 지원해주는 index를 사용해서 key를 넣는 경우가 있는데, 이것은 리액트에서는 매우 지양해야 한다.

---

UUID

Universally Unique IDentifier. 범용 단일 식별자의 약자임.

uuid 함수를 호출하면 랜덤으로 생성된 문자열이 생성된다.

⭐️ 이것을 컴포넌트의 key값으로 사용하면 고유한 key값을 부여할 수 있음.

• import 방법

  import { v4 as uuid } from 'uuid';

'v4'는 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전임.

랜덤문자열을 생성하기 때문에 완벽한 고유성 보장은 아님. 하지만 수학적으로 계산했을 때 똑같은 중복값이 나올 확률이 매우매우매우매우매우매우매우매우 적음.
실제 사용시에는 uuid값을 고유값을 취급하여 사용함.

• uuid()를 이용하여 컴포넌트 key값으로 사용하기

<p key={ uuid() }>value</p>
      // key == uuid()로 생성된 랜덤값

... 스프레드 연산자

사용하는 이유?

• ⭐️ 불변성 지키기 => 기존의 값 복사

---

이해가 어려웠던 코드

// 삭제코드
const deleteUserHandler = (id) => {
	const newUserList = users.filter(user => user.id !== id);
  setUsers(newUserList);
}

const newUserList = users.filter(user => user.id !== id); 

인자로 id를 넘겨줌. users를 filter로 돌고 나온 user id가 / 내가 인자로 넘겨준 id와 ⭐️⭐️ 같지않은 것만!! // user.id !== id ⭐️⭐️ (같지 않다면으로 해석해서 풀이가 안됬었음) setUsers(newUserList)를 반환해라!!!

---

이번 한 주 내내 독감 A형에 시달렸다.
월요일부터 몸이 안 좋았는데, 수요일에 정점을 찍고 당장에 쓰러질 것 같은 몸을 이끌고 병원으로 가서 신속항원과 함께 독감 키트를 이용해서 검사를 했다.

알고보니 코로나 돌파 감염은 아니었음.
처음 독감에 걸려보게 되었는데 코로나와 매우 증상이 비슷하고, 정말로 코로나보다 2~3배 더 아프다.

4일 꼬박 약을 챙겨먹었는데도 조금만 컨디션이 돌아왔으며, 숨도 잘 안쉬어지고 심장도 조금 이상하게 뛰는 듯한 느낌을 받는다.

합병증으로 폐렴도 올 수 있다는데, 아니겠지..

아무튼 독감으로 한 주 공부할 수 있는 시간을 잘 활용하지 못했다. 굉장히 아쉽고 아프면 나만 손해라는 것을 뼈저리게 체감한 한 주가 되었다.