CHAYAN.LOG

효율성 있는 리스트를 구현하기 위해 react-virtualized를 사용하던 도중, 해당 라이브러릴 통해 구현한 리스트의 아이템이 스크롤 중간에 사라지는 문제가 발생했다. 이슈의 원인을 탐색한 결과, react-virtualized를 이용해 구현한 리스트 뷰 상단에 조건부 렌더링을 통해 보여지는 영역이 문제였다. 해당 조건부 렌더링을 통해 보여지는 영역의 height를 미리 잡아두면 리스트 뷰가 정상적으로 본인의 위치를 인지하지만, 미리 height를 잡아놓지 않은경우, 해당 조건부를 계산하는동안 해당 영역의 높이는 0일것이고 리스트 뷰는 이때의 위치를 본인의 위치로 인지하게 되어 문제가 발생한것이였다. 이를 해결하기 위해 react-virtualized의 WindowScroller 컴포넌트내 upda..

영상(React VAC pattern - View 로직과 JSX의 의존성을 최소화 하자)의 내용을 기본으로 담았습니다. 리액트 VAC 패턴 프론트엔드 개발자와 UI 개발자가 있고 UI 개발자가 직접 html과 JSX를 작성하는 경우, 프론트엔드 개발자와 개발 영역이 겹쳐 conflict가 종종 일어난다. 이런 문제를 해결하기 위해서 VAC 패턴을 제안한다. VAC 패턴은 View Asset Component의 줄인말로, 쉽게 말해 View 로직과 JSX 를 분리해서 관리하는 패턴이다. 이렇게 분리된 JSX는 props를 통해서만 제어되고, 스스로의 상태를 관리하지 않는 stateleess 컴포넌트이다. 이는 즉 반복, 조건부 노출, 스타일 제어와 같은 렌더링에 관련된 처리만을 수행하는것을 의미한다. VA..

목차 리액트 훅이란? 함수형 컴포넌트를 클래스형 컴포넌트처럼 기능을 구현할 수 있게 해주는 기능입니다. 즉, 기존에 단순 view 역할밖에 수행하지 못했던 함수형 컴포넌트에서 상태를 관리할 수 있고(useState), 라이프 사이클에 따른 동작(useEffect)를 구현할 수도 있게 해 줬습니다. 이번 글에선 리액트 공식문서에서 보여주는 기본 Hooks가 아닌, 추가 Hooks에 대해 알아보겠습니다. 1. useReducer useState의 대체 함수로, state를 reducer의 형태로 관리하게 해 줍니다. 즉 (state, action)이 주어지면, 주어진 action에 따라 state를 newState로 만들어 반환해줍니다. // useReducer 사용 예제 const initialState ..