좌충우돌 anecdote

리액트 환경의 무한 스크롤무한 스크롤은 페이지 하단 영역까지 스크롤될 경우 다른 컨텐츠를 새롭게 로딩해 페이지에 추가되는 방식이다.react-intersection-observer 라이브러리를 사용해서 구현해보았다. - 라이브러리 설치$ npm install react-intersection-observer --save - useInView hook const { ref: observerRef, inView } = useInView() => 관찰하는 객체 (observer) 하나를 ref로 설정한 후 해당하는 객체가 화면에 보이면 특정 코드를 실행시킬 수 있다.https://github.com/thebuilder/react-intersection-observer GitHub - thebuilder/re..

React-Native에서는 비율대로 잡아주고, style 속성에서 width, height을 지정해줬다. 하지만, Reactstrap에서는 xs, sm, md, lg 속성으로 이해가 안되는 부분들이 있어 하나씩 정리해보았다. 😀 Reactstrap의 가장 큰 특징은 "모바일 우선"이라는 것이다. 1. Grid Class 매우 작은 기기 (ex. 모바일) - 너비가 768px 미만 - xs 작은 기기 (ex. 태블릿) - 너비가 768px 이상 - sm 중간 기기 (ex. 노트북) - 너비가 992px 이상 - md 큰 기기 (ex. 노트북/데스크탑) - 너비가 1200px 이상 - lg 2. Layout Container, Row, Col 을 이용하여 콘텐츠를 레이아웃하고 정렬한다. import Con..

상태 관리의 필요성 React에서 가장 중요한 상태값은 state가 많은 것은 문제가 되지 않지만, state가 많아지고 그것을 사용하는 컴포넌트의 갯수가 늘어날 수록 props drilling이 심해진다. state를 관리하지 않으면 여러 상태 값에 의해 컴포넌트가 재렌더링이 된다는 뜻이다. state가 어디서 어떻게 변하는 지 한 눈에 파악하기 힘들어지고, 어떤 컴포넌트에 의해 상태 값이 변화했는지 손쉽게 파악하기 힘들다. 그래서 우리는 전역 상태를 관리해야 하고, React 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 상태 관리 라이브러리를 사용한다. 상태 관리 라이브러리 상태 관리 라이브러리는 다양하다. Context API, Redux, MobX, Recoil 등의 많은 도구가 있고..