벨로퍼트
-
[Redux] 아주 아주 간단한 리덕스 기본 개념 2개발/React 2022. 7. 8. 14:46
리액트에서 사용하기 위한 기본 준비를 해봅시다. Ducks 패턴이란 걸 사용할 겁니다. 아주 간단한 패턴이에요. https://github.com/erikras/ducks-modular-redux 액션 타입, 액션 생성 함수, 리듀서를 각각의 파일로 분리하지 않고 파일 하나에 모아 모듈화하는 걸 말합니다. 이 패턴에서는 그렇게 모아둔 파일을 모듈이라고 해요. 자세한 설명은 위의 주소에서 확인할 수 있습니다. 덕스 패턴엔 규칙 몇 가지가 있습니다. 1. MUST 리듀서 함수는 export default로 내보낼 것 2. MUST 액션 생성 함수를 export 할 것 3. MUST 액션 타입은 reducer/ACTION_TYPE의 형식을 취할 것 4. MAY 액션 타입은 UPPER_SNAKE_CASE를 사용..
-
[Hooks] useCallback과 React.memo개발/React 2021. 3. 2. 22:09
재사용이라는 관점에서 useCallback은 useMemo와 비슷하다. useMemo는 추가한 deps가 바뀌지 않으면 함수를 호출하지 않고 기존 값을 사용하게 하는 것이고, useCallback은 deps가 변경될 때만 함수를 새로 생성하게 해준다. 보통은 컴포넌트가 re-render될 때마다 함수가 새롭게 만들어진다. 성능 최적화를 할 때 useCallback을 쓰는데, 최적화가 가능한 컴포넌트에 잘 써야 하며 모든 컴포넌트가 최적화가 필요한 것은 아니다. 최적화를 하기 위해서 코드가 추가되어야 하기 때문이다. useCallback만으로는 최적화가 끝나지 않는다. React.memo와 같이 써야 한다. 컴포넌트 re-render를 최적화 할 때, 함수가 매번 새로 생성되면 최적화가 일어나지 않으므로 ..