왜 데이터의 불변성에 대해서 학습하는가? Redux 미션을 하던 도중. 불변성에 대한 질문을 받았다.그러면 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 무엇인가..?modern JS에 따르면, 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경” 하기 때문이다….. → 의도하지 않은 객체의 변경의 본질적 원인을 파악하기 위해서 이 글을 쓴다.그리고 이 글의 마지막에는 이 결론도 알 것이다. 참조형에서 왜 기존 데이터를 복사해와서 새로운 데이터를 생성하는 것인지 const updatedStudyLogWeek = [ ...studyLogWeeks.slice(0, dayIndex), { ...sele..

Form Tag Elements → 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고, 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.value attribute 통해 값에 접근신뢰 가능한 단일 출처 (single source of truth)💡 하나의 상태는 한 곳에만 있어야 한다. useState로 상태를 정의하는 것은 하나의 상태가 한 곳에 있는 것입니다. React에서는 state에 의해 input의 value가 결정되는데 이것을 “신뢰 가능한 단일 출처”라고 합니다.우리가 React에서 State를 정의하고 여러 컴포넌트에서 해당 State를 사용해야 한다면 ..

구현에 필요한 부분만 다음 기술 블로그를 참고하여 작성 한다. https://tech.kakaoenterprise.com/149 실전 Infinite Scroll with React시작하며 안녕하세요. 카카오엔터프라이즈 워크코어개발셀에서 프론트엔드 개발을 담당하고 있는 Denis(배형진) 입니다. 약 1년 전, 저는 프레임워크의 선택, React vs Angular 이라는 포스팅을 통해tech.kakaoenterprise.com Intersection Observer API스크롤 이벤트로 무한 스크롤을 구현하면 리플로우(레이 아웃 계산을 다시 한다 HTML 요소들의 위치, 크기를 재계산한다.)에 좋지 않은 렌더링 성능과 상황에 따라 기대한 대로 동작하지 않을 수 있다는 문제점이 있다. (자세한 사항은 위..

1.  문제 발생프로젝트를 배포하는 과정에서 ESLint 경고가 많이 떴는데대부분의 경고는 쉽게 해결이 가능했지만 해당 경고는 해결하는데 몇시간이 걸렸다.     경고 메시지는 다음과 같았다. naver 지도에서 마커를 추가하는 기능을 구현하면서 생긴 오류였다. useEffect 훅을 사용할 때 발생할 수 있는 대표적인 문제 중 하나는 의존성 배열(dependency array)과 관련된 경고이며 이 문제는 리액트 훅이 컴포넌트의 상태나 prop이 변경될 때 올바르게 동작하도록 보장하는 데서 비롯된다.  즉, 이 경고는 useEffect 내에서 사용된 변수나 함수가 의존성 배열에 포함되지 않으면 생기는 경고 이다.   useEffect의 기본 형태 `useEffect`의 기본 형태는 `useEffect(..