Avatar 라는 재사용 가능 컴포넌트를 만든다고 할 경우 속성값으로 ImageStyle 이나 ViewStyle 의 타입을 가진 속성값을 받을 것이다. 이때 타입을 지정해줄 때 이렇게 TextStyle, ViewStyle, ImageStyle 로 해도 되지만 이렇게 할 경우 style={[styles.x, styles.y]} 와 같이 배열로 입력할 경우 오류가 난다. 그래서 style: ViewStyle | ViewStyle[] 과 같이 해주면 이 오류는 사라진다. 하지만 또 다시 style={[style.x, boldText ? style.bold : undefined]} 와 같이 조건에 따라 달라지는 속성값을 넣어줄 경우 또 오류가 난다. interface Props { textStyle?: Text..
아래 두가지 오류에 대해 정리해보면 첫번째 것은 navigate 메소드를 사용하고 resetRoot 를 사용하지 않으면 해결되었고 두번째 것은 그냥 내가 로직을 잘못짜서 그런 것이었다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. => 컴포넌트가 이미 사라졌는데 그 이후에 해당 컴포넌트의 상태값을 변경하는 로직이 수행될 경우 발생할 수 있다. 메..
실제로 throttle 과 debounce 의 경우 debounce 는 검색어 자동완성에 그리고 throttle 은 로딩 모달이 없는 단순 get 요청의 반복 요청의 빈도를 제한하는 정도로 사용된다. 보통은 생성, 수정, 삭제 같은 경우 isSubmitting 플래그로 로딩 모달과 함께 해당 요청의 응답이 없는 동안에는 클릭하지 못하도록 하는 방식을 사용한다. 생성, 수정, 삭제 같은 경우에 throttle, debounce 를 사용할 경우 결국은 이벤트를 두번은 수행하게 되기 때문이다. throttle 과 debounce 그리고 lodash 를 사용하여 실제 React 에 적용하는 법. throttle 은 이벤트 발생 즉시 실행되고 그 다음 지정한 시간 동안 발생되지 못하게 막고 그 시간이 지나면 다시..
https://typeofnan.dev/fix-the-maximum-update-depth-exceeded-error-in-react/ state 를 useEffect 안에서 setState 하면 무한렌더링 일어날 수 있다. [] 가 되도록 views 를 의존성 배열에서 제거하자. function App() { const [views, setViews] = useState(0); useEffect(() => { setViews(views + 1); }, [views]); return Some content; } function App() { const [views, setViews] = useState(0); useEffect(() => { setViews((v) => v + 1); }, []); ret..
React Native 는 React 의 철학 중 Learn once, Write everywhere 에 맞게 모바일 앱 개발에 있어서도 View 단의 라이브러리를 제공하고 이를 중간에서 연결해주는 브릿징 기술을 제공한다. React Native 는 Android 와 iOS 의 네이티브 모듈의 기능을 가져와 사용할 수 있다. (다른 OS 도 가능하다) 이러한 기능을 제공하는 것이 NativeModules 이며 이는 iOS 에서는 RCTBridgeModule 이라는 프로토콜을 구현한 Objective-C 클래스이다. 아직 타입이라던가 지원이 잘 안되는 네이티브 기능들도 있는데 TurboModules 라는 것이 나오게 되면 개선될 것이라 한다. 업그레이드에 대비하자. 현재는 React Native 의 경우 ..
redux.js.org/style-guide/style-guide#reducers-must-not-have-side-effects Redux Style Guide [필수] * 상태를 Mutate 하지 말 것. * 리듀서는 Side Effect 를 가지면 안된다. - ajax, timeouts, promises, random, date.now, 리듀서 밖에서 관련 변수 수정 x, 리듀서 밖에 영향을 줄 수 있는 코드가 리듀서 함수에 있으면 x * Non-Serializable 값이 상태나 액션에 있으면 안된다. - Promises, Symbols, Maps/Sets, funtions, class instances 와 같은 것들이 Redux store state 나 dispatched action 에 있으면..
왜 React Native 가 좋은가? Android / Ios Native 를 Java, Kotlin, Swift 를 통해서 개발한다고 생각해보자. 단순히 한 화면에서 다른 화면으로 전환하며 데이터 전달을 한다고 할 때 간단히 보면 아래와 같다. 논리적으로나 복잡도에서나 react native 가 가장 단순하고 논리적이라 할 수 있다. 또한 안드로이드나 Swift 네이티브의 경우 구현을 하려면 꽤나 성가신 것을 알 수 있다. 간단한 화면 전환에서 데이터 전달을 함에 있어 인텐트, 액티비티, 세그웨이, 뷰컨트롤러 등의 고차원적 개념과 이를 각 문법에 맞게 그들 특유의 방식에 맞추어 공을 들여 구현해야 하고 또한 이런 간단한 의도를 코드로 구현하고자 함에 있어 여러가지 고려하고 생각해야할 것들이 많아 상당..
가장 기본적으로 javascript 의 기본 Error 객체의 구조는 다음과 같다. new Error() 해보면. message, name, code 정도가 있다 실제로는 message 와 name 만 있다. name 은 기본 Error 이고 message 는 기본 '' 이다. 리액트에서 에러 처리에 대한 고려는 곧 redux 를 사용할 것인가 라는 고려까지 하게 만든다. 그래서 전체적인 구성에 있어서 큰 영향을 미치는 사안이다. 리액트의 useState, useEffect, useContext, useMemo, useCallback, useReducer 등과 같은 훅과 함께 react-redux 의 useDispatch, useSelector 훅은 너무나도 보편적으로 잘 사용되고 있기에 리덕스를 사용하..
아래 글은 잘못된 판단. 개념 파악을 위한 도움용으로 참고하면 좋음. 이 글에 관련 내용 기재. https://thewavelet.tistory.com/76 즉, React 는 우선적으로 함수형 프로그래밍 방식을 기본으로 사용하고 또한 Javascript 기반으로 하는 Node.js 또한 그렇게 하는 것이 좋아보인다. React 가 함수형 프로그래밍 방식을 가장 잘 적용한 라이브러리라고 보아도 좋을 듯 하다. 명령형 프로그래밍의 if, for, i++ 과 같은 것 보다는 간단하고 틀리지 않을 filter, map, reduce, take, groupBy 와 같은 작은 단위의 순수 함수들을 프로그래밍의 기본 구성 요소로 간주하면서 프로그래밍 하는 사고와 방식. 함수형 프로그래밍 : 1930년대 알론소 처치..
react hoc , context api , recompose https://velopert.com/3606 https://velopert.com/3537 https://github.com/acdlite/recompose https://reactjs.org/docs/higher-order-components.html 리액트 에서 가장 기본이 되는 부분이다. 의외로 내용이 좀 난이도가 있기 때문에 많은 개발자들이 간과하고 깊이 있게 읽어보지 않고 넘어간다. 그로 인해 계속하여 소 귀에 경 읽기가 된다. 리덕스니 사이드 이펙트니 미들웨어니 인증이니 스마트 더미 컴포넌트 니 하는 많은 내용들이 있지만 정작 실전 코드에서 고차함수, 고차컴포넌트, 컨텍스트 api 개념을 모르면 코드를 이해하지 못한다. 왜냐하면..
기존에 약간 애매했던게 immutable 은 객체변화 감지를 단순화하게 하기 위해서 하는 목적도 있는데 그럼 store 가 매번 immutable 하게 갈아치워지는건가? 생각했었다. 하지만 그런 것이 아니라 redux 구현체의 원리를 보니 reducer 마다 합쳐서 combine reducer 를 해서 각 reducer 단위로 state 라는 녀석의 변화 감지를 하도록 되어 있다고 한다. 결국은 store 는 하나의 상태 저장소 라는 개념이고 단일 책임 원칙과 각 리듀서들을 통합해서 단순화한 하나의 상태 저장소라는 개념이다. 따라서 불변성이 지켜져야 하는 부분은 store 의 state 즉, reducer 마다 할당된 state 들 각각이 immutable 해야 한다. NGRX 는 service 단을 두..