const [state, setState] = useState(초기값)
위 처럼 state의 생성과 동시에, 가져야 할 초기값을 useState함수의 인자로 넣어준다. 그러면 state와 setState라는 두 요소를 배열 형태로 반환해줌.
리액트에서는 map을 사용해서 컴포넌트를 반복렌더링 할 때, 반드시 컴포넌트의 key를 넣어줘야한다.
Why?
Q. 만약, key 없이 리액트는 가상DOM을 비교하는 과정은?
A. 배열을 순차적으로 비교하면서 변화를 감지하려 한다. key가 있음으로써 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게 된다.
=== key값을 넣어줘야, 리액트의 성능이 최적화된다.
key는 props처럼 생겼지만, props로 설정 안해줘도 key를 넣을 수 있음.
map에서 지원해주는 index를 사용해서 key를 넣는 경우가 있는데, 이것은 리액트에서는 매우 지양해야 한다.
Universally Unique IDentifier. 범용 단일 식별자의 약자임.
uuid 함수를 호출하면 랜덤으로 생성된 문자열이 생성된다.
⭐️ 이것을 컴포넌트의 key값으로 사용하면 고유한 key값을 부여할 수 있음.
import { v4 as uuid } from 'uuid';
'v4'는 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전임.
랜덤문자열을 생성하기 때문에 완벽한 고유성 보장은 아님. 하지만 수학적으로 계산했을 때 똑같은 중복값이 나올 확률이 매우매우매우매우매우매우매우매우 적음.
실제 사용시에는 uuid값을 고유값을 취급하여 사용함.
<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일 꼬박 약을 챙겨먹었는데도 조금만 컨디션이 돌아왔으며, 숨도 잘 안쉬어지고 심장도 조금 이상하게 뛰는 듯한 느낌을 받는다.
합병증으로 폐렴도 올 수 있다는데, 아니겠지..
아무튼 독감으로 한 주 공부할 수 있는 시간을 잘 활용하지 못했다. 굉장히 아쉽고 아프면 나만 손해라는 것을 뼈저리게 체감한 한 주가 되었다.
한주간 진짜 너무 고생많으셨습니다
지금은 좀 나아지셨을려나요?
날씨가 말썽이네요