[22.05.03] TIL

key 값으로 index를 쓰지 말자

key는 React가 DOM 요소를 식별하는 데 사용하는 유일한 것.
리스트가 추가되거나 중간에서 제거될 때 key가 이전과 같으면 DOM 요소가 이전과 동일한 구성 요소를 나타낸다고 가정하지만 아니기 때문에...

todoList.map((todo, i) => {
	const key = `todo-${i}`
    return (<li key={key}></li>)
})

리액트 - 리스트와 key

인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명

e.currentTarget 사용

currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다.
event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.

setState()

setState는 비동기적으로 접근
setState((preState) ⇒ !preState)

React에서 DOM을 직접 조작하지 말자

리액트는 살생부
DOM을 직접 조작하면 죽여야 할 놈이 없으니까 에러가 난다.

Tip

• 항상 자기 이력서와 프로필 업데이트, pdf 파일 준비
• 정규식 확인 https://regex101.com/
• 이메일 유효성 체크 (W3C) https://www.regextester.com/97767