본문 바로가기

리액트

 (7)
[리액트] Compound Component 활용하기 2020. 9. 27. 21:28 DEV 커뮤니티에서 React Component Patterns에 관한 글에서 Compound 컴포넌트 패턴을 소개하는 글을 읽고 실무에 적용해보았다. 글에서 소개하는 Compound Component에 대해 간단하게 설명하자면 내부 state를 공유하며 서로 상호작용하는 컴포넌트들을 내부 static 컴포넌트로 두어 사용자에게 내부 로직은 추상화하고, 이외의 로직 작성을 독립적으로 작성할 수 있게 해주는 패턴이다. "Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the backg..
[리액트] react-virtualized을 활용한 무한 스크롤 구현 2020. 8. 6. 22:18 이전에 리액트 무한 스크롤 라이브러리를 하나 뜯어보고 간소화한 버전으로 구현해보았다. 바로 이 글이다. [리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅� coffeeandcakeandnewjeong.tistory.com 그런데 회사에서 무한 스크롤과 관련하여 이슈가 나온 것이 있었는데 무한스크롤되는 요소가 극단적으로 10만개 이상이 되고, 일정 개수만큼 추가로 로드해와도 렌더링 속도가 느려 화면에 요소가 그려지는 것이 지연되는 문제였다. 그래서 데이터를 로드한 것이 완료되었어도 잠시 빈 공간..
[리액트] mobx-react-lite로 todoList 작성하기 2020. 7. 15. 19:41 오랜만에 리액트! 리덕스만 써보다가 mobx-react-lite 상태관리 라이브러리의 예제 코드를 작성해보았다. mobX란 리액티브 프로그래밍 기반으로 리액트에서 상태관리를 가능하게 해주는 라이브러리로 앵귤러를 미리 해서 그런가 크게 어렵게 느껴지진 않았다. 참고했던 링크들 MobX를 React Hooks (TypeScript) 와 함께 사용하는방법 heros-mobx-react-lite example React에서 Mobx 경험기 (Redux와 비교기) mobx-react v6 마이그레이션하기 MobX 내부 살펴보기 mobx-react-lite 짧막 정리 이번주부터 살펴보기 시작해서 아직 내부 로직까지 완벽하게 이해하진 못했지만 mobx-react-lite가 뭔지에 대해 지금까지 이해한 바는 다음과 같..
[번역] React Components, Elements, 그리고 Instances 2020. 4. 22. 13:07 본 포스트는 Dan Abramov의 React Components, Elements, and Instances를 번역한 글입니다. 많은 사람들이 React에서 components와 컴포넌트의 instance, 그리고 elements를 혼동합니다. 왜 화면에 그려지는 무언가를 의미하는 각각 다른 세 개의 용어가 있을까요? 당신이 React를 처음 접했을 때 아마 컴포넌트 클래스와 인스턴스만 사용해서 개발하였을 겁니다. 예를 들어, 당신은 클래스를 생성해서 Button 컴포넌트를 선언했다고 합시다. 프로그램이 실행되었을 때, 아마 이 컴포넌트의 여러 인스턴스가 있고, 각각은 인스턴스만의 고유한 props와 지역 state가 존재할 것입니다. 이것은 전통적인 객체 지향 UI 프로그래밍입니다. 그럼 elemen..
[리액트] Hook 렌더링 최적화 실무 적용기 2020. 4. 9. 16:47 최근에 Daily DevBlog에서 useCallback과 React.memo을 통한 렌더링 최적화에 관한 글을 읽었다. 글을 읽고 깨달은 것은 내가 지금까지 useCallback을 잘못 사용하고 있었다는 점이었다. 마침 챗봇 빌더의 설정 페이지를 시작으로 점차 렌더링 최적화를 적용해나갈 계획이었기 때문에 이를 수정하고자 한다. 더불어 리액트 훅 기반 프론트엔드 개발 시 주의할 점에서 state는 독립적으로 설정해야 하는 점 또한 적용할 것이다. 1. useCallback과 React.memo와의 관계성 우선 공식문서를 꼼꼼히 읽으면서 useCallback의 올바른 쓰임새부터 파악했다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의..
[리액트] Toast 알람 구현 (2) 2020. 4. 7. 16:20 3/31일에 Toast 알람을 custom hook으로 한 파일 내에서 구현을 하였다. 그러다 보니 해당 컴포넌트를 함수 실행으로 가져온다거나, 컴포넌트 업데이트를 위한 별도의 state를 두는 등의 좋지 않은 패턴을 썼었다. 저번 포스팅에서의 개선점들을 다시 열거하자면, 1. ToastContainer를 함수로 쓰는게 거슬린다! 로 쓰고 싶다 ㅠㅠ 2. setInterval()이 성능에 영향을 줄 거 같다. 따라서 시각적인 변화는 requestAnimationFrame의 콜백함수에서 해결하고 싶은데 가능할까? 3. trigger state말고 ToastBox 업데이트를 할 수 있는 방법을 찾아보자. 등의 고려 사항이 있었다. 따라서 오픈 소스 라이브러리인 react-toastify 소스 코드를 분석해보..
[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..

티스토리툴바