큰 꿈은 파편이 크다!!⚡️

회사 업무를 하면서 새롭게 해결하는 문제들이 주기적으로 나오다보니 기록을 겸해서 문제-해결에 관련된 글을 쓰게 된다 😜 얼마 전, 기존에 만들어놓았던 리액트 웹사이트를 웹뷰 위주의 C#기반 모바일 앱에 붙이는 작업을 진행했었다. 이 과정에서 ‘웹뷰’란 정말.. 브라우저도 신경쓰면서 모바일 os까지 신경써야 하는 것인가 하는 생각이 들 정도로 예상대로 동작하지 않는.. 어려운 작업이라는 것을 깨달았다. 아무튼 그 과정에서 내가 알고 있고 익숙한 흐름을 제공하는 웹뷰 앱들(ex. 토스)과 내가 만든 앱을 비교해보니, 모바일-웹뷰 간의 데이터 교환이 필요하다고 생각했다. 예를 들면 이런 흐름을 제공할 수 있도록. (웹뷰) 게시글 목록에서 게시글을 누르면 (모바일) 페이지로 게시글이 열림 (모바일) 신규 게시글..

들어가며: 나의 기술부채 💰 리액트를 배울 때 정말 기본으로 포함되어있는 useMemo, useCallback 훅과 React.memo는 재사용과 리렌더링 방지를 통한 성능 향상을 야기한다고 알려진 함수들이다. 이 주제에 대해 처음 학습할 때 성능 향상에 대한 효과까지는 이해를 했었으나 항상 성능을 향상시키는 것이 아니라는 글을 보고서는 이해가 안되어서 그냥 사용을 안해버렸는데.. 이번 기회를 통해 간단하게나마 전체적인 정리를 해보려 한다. useMemo: 연산 값 재사용 리액트에서 제공하는 useMemo 훅은 메모이제이션Memoization 이라는 기법을 통해 기존에 계산했던 결과를 저장하여 필요 시 재사용하므로써 불필요한 연산을 줄여 성능을 향상시킨다. 반대로, 항상 바뀌는 값이라면 결과를 재사용할 ..

React를 사용한다면 아주 익숙할 React Router가 2020년 12월에 v6을 릴리스했다. 메이저 버전넘버가 바뀐 만큼 breaking-changes가 있었고, 그동안 무지성으로 이 패키지를 사용했고 공식문서에 소홀했던 것을 반성하며 v5에서 v6으로 넘어가면서 알게 된 몇가지 내용을 정리해보려 한다. 🐓 react-router-dom을 뭣모르고 사용했더니 일어난 일 react-router-dom vs react-router-native $ npm install react-router-dom # or, for a React Native app $ npm install react-router-native 웹 개발을 위해 react를 사용한다면 react-router-dom을 설치한다. 위 코드에서..

setState했는데 값이 안바뀐다? export default function App() { const [count, setCount] = useState(0); const onAdd = () => { setCount(count + 1); console.log(count); }; return ( {count} +1 ); } 위 코드를 실행해보면, 화면에 나타나는 count는 정상적으로 1이지만, 콘솔 창에는 0이 출력된다. 단순히 화면을 리렌더링 하는데에는 문제가 없지만 아래와 같이 setState 이후 상태값을 바로 다른 로직에 사용하면 원하지 않는 결과를 맛보게 된다. export default function App() { const [count, setCount] = useState(0); co..