기본적으로 useEffect의 clean-up함수는 컴포넌트가 unmount 될 때 실행된다. 따라서 컴포넌트가 unmount 될때의 이벤트를 clean up 함수에 걸어주는것이 일반적이다. 그러나 props가 비어있지 않다면 clean up 함수는 우리 기대와 다르게 동작한다. 다음과 같은 예시에서 해당 컴포넌트는 ratingId가 바뀔때 '마운트'라는 콘솔이 찍힐것이다. 그러나 ratingId가 바뀔때마다 cleanup 함수인 '언마운트' 콘솔도 함께 찍힌다 그 이유는 실제 화면에서 테스트해보면 알 수 있다. props가 바뀔때마다 hook이 새로 만들어지기때문에, 항상 이전 useEffect를 unmount하고 다시 새로운 useEffect를 mount하는 것이다. 실제로 ratingId라는 pro..

켄도 라이브러리를 사용하다가 grid의 cell을 custom으로 가공할 일이 생겼다 예시 코드처럼 이벤트를 받아 ActivityReportButton이라는 컴포넌트를 리턴한다. 그런데 문제는 한칸의 cell만 변경하더라도 모든 cell이 리턴 작업을 수행한다는 것이다. useCallback으로 이를 해결할 수 있다. 사실 함수는 바뀌지 않으므로 매번 동일하게 ActivityReportButton을 리턴하면 된다. 다만 ActivityReportButton 컴포넌트 내부 로직에 state가 있기 때문에, state가 변경되는 cell만 컴포넌트가 리렌더링 된다. useCallback의 두번째 인자로 빈 배열을 설정하면, 항상 바로 직전의 함수를 수행한다. (즉, state가 변하지 않는 이상 mount ..

kendo 컴포넌트 쓰다가 state의 배열을 수정할 일이 생겼다 역시나 마찬가지로 배열을 깊은 복사 처리한 후 조건에 따라 리턴하는 방식이었다. zoneList라는 배열을 변경하고 싶었다 zoneList는 여러가지 key를 가진 객체들의 배열이다. 나는 이벤트로 넘어온 id와 같은 id를 가진 원소들만 골라서, 원소들의 selected라는 key를 기존 값과 반대로 만들어주고 싶었다. 삭제에 filter를, 추가에 concat이나 spread operator를 이용한것처럼, 수정에도 map을 이용한다. 각 key에 대해 조건을 달아주고, 조건을 충족하면 기존 key는 spread operator형태로, 변경을 원하는 key의 key(원소의 key)는 수정 후 리턴해준다. 단 조건에 해당하지 않으면 ke..

앞서 말했듯 리액트가 추구하는 불변성탓에 push나 splice등의 메소드를 사용할 수 없다 따라서 매번 새로운 배열을 만들어 조작해야 정상적인 객체간 비교가 가능하다 얕은 복사를 통해 조작하면, 배열같은 객체들의 State가 변경되었다고 감지할 수 없기 때문이다. (primitive type의 자료가 아닌이상 참조가 항상 유지된다) 따라서 새로운 배열을 만들어 조작해야, 버츄얼DOM과 실제 DOM의 변화가 인지되며 리렌더링이 된다. 배열 속 원소의 삭제도 마찬가지다. 예시코드이다. 해당 코드는 Grid에서 특정 원소를 한번 눌렀을때 selectedZone 배열에 추가되고, 한번 더 누르면 제거되는 로직이다. findIndex함수를 이용하여 배열 속 name이 event에서 넘어온 name과 같은 것들을..

리액트의 불변성 유지 문제로 push를 이용하여 state에 새로운 항목을 추가할 수 없다 따라서 concat을 사용한다. 예시 코드처럼 selectedZone이라는 state가 있을때, 특정 이벤트마다 항목을 추가하려면 setState를 하되 기존의 selectedZone에 concat을 사용하여 배열을 추가하는 방식으로 한다. concat은 기존 배열을 수정하지 않고 새로운 배열을 만들어주기 때문에 불변성이 유지된다. + spread 연산자도 동일하게 사용 가능하다

참고: yeoulcoding.tistory.com/171 [React] 가상스크롤 구현 (1) Lab은 최신 기술 스택이나, 실험적인 문법, 라이브러리들을 테스트하고 적용해보는 섹션입니다. Overview 프레임워크를 떠나서, 리스트는 모든 애플리케이션에 필수로 구현되어야 하는 기능 중의 yeoulcoding.tistory.com 많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항목을 그리면 성능상 문제를 초래한다. 즉, 10만개의 데이터를 그리기 위해 10만개의 DOM노드를 그리려고 하면 Call Stack size error가 발생한다는 것이다. 따라서 화면에 직접적으로 보여지는 부분만 그리고, 나머지 부분은 가상으로 그려내는 것이 Virtual Scroll의 목표이다. 실제로 화면에서 보여지는..