React 썸네일형 리스트형 MobX vs Redux Toolkit MobX와 redux Toolkit은 둘 다 React 애플리케이션에서 상태 관리를 할 때 사용되는 라이브러리이다. 두 라이브러리 모두 장단점이 있으며, 사용자의 요구사항에 따라 적합한 라이브러리를 선택해야 한다. MobX는 간단하고 직관적인 API를 제공하며, 특히 복잡한 애플리케이션에서 상태 관리를 쉽게 할 수 있다. 또한, MobX는 자동으로 데이터를 관찰하고 업데이트하기 때문에 개발자가 별도로 상태 변화를 감지하거나 업데이트를 수행할 필요가 없다. 이는 애플리케이션 개발을 더욱 빠르고 쉽게 만들어 준다. 반면, Redux Toolkit은 Redux의 기능을 보완하고 개발자의 작업을 단순화하는 데 중점을 둔 라이브러리 라고 한다. Redux를 사용하면 복잡한 애플리케이션의 상태 관리를 보다 체계적이.. 더보기 리액트의 Referential Equality 본문 - https://blog.bitsrc.io/understanding-referential-equality-in-react-a8fb3769be0 Referential Equality란 무엇일까? 왜 referential Equality를 이해하는 것이 중요하며, 리액트에서 컴포넌트를 re-rendering 하는 데에 있어 어떻게 영향을 주는지 알아보자 ㅋ 리액트에서, state는 브라우저에서 컴포넌트를 랜더하기 위해 사용 된다. state가 바뀌면, 리액트는 새로운 데이터와 함께 컴포넌트를 re-render 시킨다. 이러한 부분은 유저에게 어플리케이션에서 일어나는 모든 변화(UI 변화)를 지속적으로 알려주는데에 도움을 준다. 하지만, 많은 리액트 개발자들은 state를 적절하게 관리하지 않는다. 이.. 더보기 간단한 리덕스의 세 가지 규칙 더보기 리덕스 공부하며 요약한 세 가지 규칙을 작성 해본다. 1. 단일 스토어 하나의 프로젝트 안에는 하나의 스토어만 존재. - 하나의 프로젝트 안에 여러 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장 X 2. 읽기 전용 상태 - Read only 리덕스의 상태는 read-only 임. 따라서 업데이트하는 과정에서 불변성을 지켜 주기 위해 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함 - ex.) spread 연산자 or immer library 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥.. 더보기 JSX 문법에서 왜 여러 Element 들은 하나의 최상위 element에 감싸져 랜더 되어야 하는건가? Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다. const Categories = () => { return ( // ( onSelect(c.name)} > {c.text} ))} ); }; export default Categories; 그럼 왜 Virtual DOM은 컴포넌트 변화를 효율적으로 비교하기 위해서, 하나의 DOM 트리 구조가 요구 되는 걸까? Element가 30개가 바뀌었다고 reflow를 30번씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어서 딱 한번만 실행시키기 위해서 - 즉 reflow를 최소화 시키기 위해서 더보기 스토리북 docs 에서 특정 component에 css 적용 내용 특정 component 가 docs 페이지에서 랜더 될 때, 해당 component만 css를 적용하고 싶을 때가 있다. 특정 컴포넌트. stories.tsx 파일에서 해당 컴포넌트 decorators에 위 사진과 같이 적용시키면 끝. - * 문제는 안에 존재하는 children elements에 특정 스타일 적용하고 싶을 때, 아직 해결 방법을 못 찾은 것 ㅜㅜ Ref https://storybook.js.org/docs/react/writing-stories/decorators 더보기 Class Component vs Functional Component Class Component vs Functional Component 1. 클래스 컴포넌트는 기본적으로 React 에서 Extend 된 컴포넌트 인 반면, 함수 컴포넌트는 plain Javascript function 이다. 때문에 클래스 컴포넌트는 React element (JSX) 를 리턴 할 수 있는 render function 이 필요 2. 라이프사이클이 다름: 함수 컴포넌트는 componentDidMount, componentWillMount 등 이 없고 UseEffect만 있음 더보기 이전 1 다음
