전체 글34 redux 와 MobX 의 공통점 차이점과 특징 정리 공통점 MobX는 JavaScript 애플리케이션의 상태 관리를 단순하게 만드는 라이브러리 중 하나입니다. 주로 React와 함께 사용되지만, 다른 프레임워크와도 통합할 수 있습니다. MobX는 반응형 상태 관리 패턴을 구현하여 데이터의 변화를 자동으로 감지하고 관련된 부분을 자동으로 업데이트합니다. 차이점 상태 관리의 접근 방식: Redux: 단일 스토어를 사용하고, 불변성을 유지하며 상태를 변경하는 "액션"을 통해 상태를 업데이트합니다. 리듀서 함수를 사용하여 액션에 따라 상태를 변경합니다. MobX: MobX는 객체지향 프로그래밍의 개념을 활용하여 상태를 관리합니다. 관찰 가능한 상태와 액션을 사용하여 상태를 변경하고, 반응(Reactions)을 통해 변경에 반응합니다. MobX는 불변성을 강제하지.. 2024. 3. 8. 1-12) [리액트 기초] useCallback useCallback은 컴포넌트가 리렌더링 될 때 내부에 작성된 함수를 다시 생성하지 않도록 메모리제이션하는 리액트훅이다. useCallback 사용법 const uc = useCallback(func, arrays); 첫 번째 인수로는 콜백 함수를 전달하고, 두 번째 인수로는 의존성 배열을 전달한다. useCallback은 의존성 배열에 담긴 값이 바뀌면 첫 번째 인수로 전달한 콜백 함수를 다시 만들어 반환한다. 만약 첫 번째 인수로 전달한 콜백 ㅎ삼수를 어떤 경우에도 재성성되지 않게 하려면 의존성 배열을 빈 배열로 전달한다. const uc = useCallback(func, []); useReducer가 반환하는 함수 dispatch는 함수 reducer를 호출하는데, 이 reducer는 항상 최신.. 2024. 2. 7. 1-11) [리액트 기초] React.memo를 이용한 최적화 React.memo는 인수로 전달한 컴포넌트를 메모리제이션된 컴포넌트로 만들어 반환하는 역할을 한다. 이때 메모리제이션 되는 기준은 Props의 값의 변화가 있는지 없는지 여부가 기준이 된다. React.memo 역시 useMemo와 역할은 비슷하지만 useMemo는 리액트훅에 해당되고 React.memo는 고차 컴포넌트에 해당한다. 즉 전달된 Props 가 변경되지 않는한 리렌더 되지 않는다. 사용법은 간단하다. import React from 'react'; ... 소스코드 export default React.memo(TodoItem); 위 처럼 export 할 때 React.memo() 로 컴포넌트를 감싸주면 된다. 그럼 메모리제이션된 고차 컴포넌트로 리턴 된다. 2024. 2. 6. 1-10) [리액트 기초] useMemo함수의 불필요한 재호출 방지 리액트의 최적화 기능 중의 하나의 useMemo에 대해서 알아보자. 리액트의 장점은 실시간 렌더링이라고도 할 수 있지만, 불필요한 렌더링을 하게되는 경우 많은 리소스에 연산을 하게되어 성능 저하의 원인이 된다. 불필요한 리렌더링을 방지하기위하 목적으로 useMemo 를 사용한다. const value = useMemo(callback, arrays?]; 호출된 useMemo 는 의존성배열인 arrays의 값이 변할 때만 리렌더링되며, 값이 변하지 않는 한 재호출되지 않는다. 아래 사용 예시를 보자 const analyzeTodo = useMemo(() => { console.log('todo가 변경될 때 마다 analyzeTodo() 함수를 호출합니다.'); const totalCount = todo.l.. 2024. 2. 5. 이전 1 2 3 4 5 ··· 9 다음
