타코따코의 1인 개발 스튜디오

useState 데이터 변경,비동기, if 분기 불가, 동기적 시행 가능 호출 → 즉시 UI 변경 X → 이벤트 핸들러에 스케쥴 등록 (함수가 끝나야 변경, 그 사이 변경 안됨)top level 에서만 사용 (if문, 분기 처리 등에서 useState() 사용 불가) → 리액트가 트리 이해 못 함. → 첫 로드에는 에러가 없지만 리랜더링시 에러 발생.비동기setState 여러번 호출해도 리랜더링 종료 후 한번만 바뀜 (중간에 콘솔 찍으면 변화가 없음)동기적으로 진행하고 싶다면 → setCount((like)=>like+1) (이전 값을 명시적으로 표현)useState의 초기화에 함수가 필요한 경우.lazy 초기화 (function 사용) const [watched, setWatched] = useSta..

모델을 인터페이스로 만든다.type을 사용해 만들기도 하지만, 확장성 & 리팩토링을 고려하면 인터페이스가 좋다고 한다.  인터페이스로 만들다보니, 해당 객체를 만들고 imple 하는 방식으로 만들어야한다.Flutter에서는 모델을 만들때 class 로 만들어서 객체 안에 데이터를 저장하는 방식을 택했는데,인터페이스로 만들다보니 인터페이스를 받고, = {} 형태로 받아야하는게 아직 익숙하지 않은 것 같다.  const handleAddToCart = () => { const pizzaCartItem: PizzaCart = { id: pizza.id, name: pizza.name, quantity: 1, unitPrice: pizza.unitPrice, t..

성능 최적화(1) : memo, useMemo, useCallbackReact.memo : setState에 의해 랜더링 되는 경우, react.memo로 파싱되는게 원초적인 값이라면, 해당 하위 컴포넌트는 리랜더링 되지 않는다.setState에 의해 해당 ParentComponent가 새롭게 생성 → 해당 컴포넌트 랜더링ChildComponent도 리랜더링, → 하지만 setState에 의해 ChildComponent가 변경될 필요가 없다면memo를 사용해서 리랜더링 방지가 가능하다. (이전 값 계속 사용)장점 : 캐싱 사용 → 리랜더링 방지 → 속도 향상단점 : 값(string, boolean..)과 같은 원초적인 값만 적용, {}와 같은 객체 전달시 캐싱이 불가능이유 : 모두 새롭게 생성 → 새로운..

React가 리스트의 각 항목을 추적하는 데 사용하는 고유 식별키 존재한다는 뜻은 → 랜더링해도 DOM에 해당 컴포넌트가 존재한다는 것.컴포넌트의 키가 변경된다면 같은 위상, 같은 데이터여도 다시 랜더링된다.리스트에서 key를 추가하라고 하는 이유리스트에 새롭게 그려질때마다 같은 위상을 가지므로 모든게 매번 새롭게 그려짐 → 퍼포먼스 저하  key를 추가하면, 새롭게 그려진건 key값이 변화하기 전까지 새로 그려지지 않고 그대로 유지key값을 가진 데이터를 리셋시키고 싶다면 키를 지우는게 아닌 새로운 키 값으로 변경시켜줘야한다. 매번 새롭게 그려지는걸 막고 싶다면, (기존 데이터를 이용하고 싶다면)key를 써서 해당 부분이 다시 랜더링되는걸 고려해보면 좋을 것 같다.

React + JS에서 객체 업데이트를 해야한다면,**이렇게 말고**setPerson({ firstName: e.target.value, // New first name from the input lastName: person.lastName, email: person.email});**이렇게**setPerson({ ...person, // Copy the old fields firstName: e.target.value // But override this one}); 불변객체이기 때문에 직접 넣어 줄 수 없다.  ... 문법을 써야한다.  여기까지는 크게 불편하지 않는데, 객체 안에 객체가 있는 중첩 형태라면 꽤 귀찮아진다.  const [person, setPerson] = useState..