0206 검색 키워드 :
리엑트 구조분해 할당 : 변수에 새 이름 부여하기 !
자바스크립트 스텍 큐 찾아보기
리엑트 컴포넌트
상류와 하류라는 개념이 있음
setTimeout();
setImterval();
얘네들은 자바스크립트가 너무 오래걸릴거 같아 일단 대기해 (자바스크립트는 싱글스레드니까)
리엑트 커스텀 훅
react immer
crud
c : 할일추가하면 배열에 담는거 확인하면 끝 입력할 때 유효성검사 (공백제거 공백만 입력했을 때 입력안했을 때 )
r :
u :
d :
리엑트 컴포넌트
상류와 하류라는 개념이 있음
상류는 하류에게 정보를 공급해준다
하류는 상류로부터 공급 받은 정보를 소비(사용)를 한다
대전제이지만 필수는 아니다
함수와 데이터는 최대한 하류에서 생성
필요한 것만 상류에서 생성한다
이유는 컴포넌트 상태관리 용이, 효율적인 리렌더링을 하기 위함임
자바로 따지면 변수나 함수의 생성,소멸 주기를 관리한다는 것
리엑트에서는 수정이나삭제 할때 중요한것 : 원본을 복사해서 복사본을 수정또는 삭제한 후 리렌더링한다
리엑트의 중요 규칙이 불변성임
삭제하는 것 : 뭔가 배열이든 문자열이든 숫자든 원본을 복사해서 원하는 인덱스를 삭제하고(필터로 걸러내고) 원하는 요소가 삭제된 복사본을 리랜더링한다
수정하는 것 : 배열,문자열,숫자든 원본을 복사해서 원하는 데이터를 수정하고 수정된 복사본을 리렌더링한다
1. `setNumber(number + 1);`
이 방식에서는 현재 상태인 `number`를 직접 참조하여 새로운 상태 값을 계산합니다. 이 경우, `setNumber`가 호출될 때마다 `number`의 현재 값에 1을 더한 값을 새로운 상태 값으로 설정합니다. 그러나 이 방식의 문제점은 상태 업데이트가 비동기적으로 이루어진다는 것입니다. 만약 여러 상태 업데이트가 동시에 일어나면, 모든 업데이트가 같은 `number` 값에 기반하기 때문에 예상치 못한 결과를 초래할 수 있습니다. 예를 들어, 연속적인 클릭이 빠르게 발생하면, 각 업데이트가 같은 초기 `number` 값에서 시작할 수 있습니다.
2. `setNumber((_number) => _number + 1);`
이 방식에서는 업데이터 함수를 사용합니다. 여기서 `_number`는 현재 상태의 가장 최신 값을 나타냅니다. 이 방식을 사용하면, React는 상태 업데이트를 실행할 때 현재의 상태 값을 받아서 이를 기반으로 다음 상태 값을 계산합니다. 이는 여러 상태 업데이트가 연속으로 발생할 때 각각의 업데이트가 이전 업데이트가 완료된 후의 최신 상태를 기반으로 실행되도록 보장합니다. 따라서, 이 방식은 상태 업데이트가 비동기적으로 이루어지는 환경에서 더 안정적이며 예측 가능한 결과를 제공합니다.
간단히 말해, 첫 번째 방식은 현재 상태를 직접 참조하여 새 상태를 설정하는 반면, 두 번째 방식은 상태 업데이트를 위한 함수를 사용하여 현재 상태의 가장 최신 값을 기반으로 새 상태를 계산합니다. 두 번째 방식은 상태 업데이트가 연속적으로 발생하는 경우에 더욱 안정적인 결과를 보장합니다.