react24 React가 이벤트를 관리하는 방식 - 3 (완) https://rbals0445.tistory.com/139 React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모 rbals0445.tistory.com 지난 글에서 이벤트 발생시에 등록했던 이벤트 핸들러가 어떻게 작동하는지 알아봤습니다. 코드 분석을 하면서 얻게된 내용들을 최종적으로 정리할 예정입니다. 리액트에서 이벤트 버블링을 사용하면 안되는 이유? 약 반년전에 회사 소스코드에다가 이벤트 버블링으로 함수를 작성한적이 있었습니다. 당시에 작성하고나서 효율적으로 작성했군.. 하면서 PR.. 2023. 6. 19. React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모르는게 너무 많더라구요. ㅎㅎ 거의 2~3주 동안 시간이 나면 rbals0445.tistory.com React에서 사전에 어떻게 native event와 매핑이 되고, 실제로 등륵은 어떻게 이루어지는지 알아보았습니다. 이번 글에서는 어떻게 이벤트가 실행되는지 알아보겠습니다. 화면에 모든 컴포넌트들이 렌더링 되고, 특정 엘리먼트를 클릭하면 이벤트는 어떻게 실행 될까요?? 이벤트 실행시키기 item 1 을 클릭해서 'click' event를 발생시킨 경우를 예로 들어보겠습니다. 코.. 2023. 6. 18. React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모르는게 너무 많더라구요. ㅎㅎ 거의 2~3주 동안 시간이 나면 계속 틈틈히 찾아봤던것 같습니다. 첫번째 주제는 React에서 이벤트를 어떻게 관리하는지에 대해서 자세하게 알아보겠습니다. 이 글을 읽고나면 아래 내용들을 코드로 직접 확인할 수 있습니다. (10개가 넘는데 다 쓰진 않겠습니다) - 리액트에서 이벤트 버블링을 사용하지 않아도 되는 이유 - 리액트의 이벤트는 document가 아닌 rootElement에 등록된다는 사실 - 리액트에서 어떻게 이벤트 버블링을 통해 이벤트를 처리하는지? - 어떻게 특정 함수만 찾아서 영리하게 실행하는지? - onClick 함수를 onClick.. 2023. 6. 15. [WEB] 테스트 코드 라이브러리 Jest 사용해보기 - 1 FE에서 테스트는 참 말이 많은 주제인것 같습니다. E2E, Unit Test를 도입해서 view, logic 을 모두 테스트하고, 커버리지도 100% 달성하겠다! 이런 것은 쉽지 않습니다. Input과 Output이 명확한 데이터를 다루는 영역에서는 테스트를 작성할때 이슈가 많이 없지만, FE는 DOM을 실시간으로 바꾸고 그 화면들을 테스트 하는것은 쉽지 않습니다. 또한 들어가는 노력에 비해서 return이 그렇게 크다고 생각하지 않습니다. 테스트를 도입해서 생기는 코드의 견고함과 안정성은 동의하지만, 화면같은 경우 자주 설계같은것이 바뀌게 되는데 그럴때마다 새롭게 TC를 정의하고 확인하는것이 시간 대비 효율이 맞나 싶은 생각이 있습니다. 하지만 util함수에는 BE처럼 똑같이 테스트를 할 수 있겠다고.. 2023. 5. 15. [React] Optimization, useMemo, useCallback, memo - (2) 반갑습니다 ^^ 2탄을 이어서 작성해 보겠습니다. React.memo는 컴포넌트를 넣으면 컴포넌트를 반환해주는 함수인데요. (HOC) 이것들에 대한 설명을 찾아보면, memo는 props를 비교하고 얕은 비교를 한다. 이런 설명이 전부입니다. 이렇게만 알고 가면, 이 케이스에는 렌더링이 일어날까? 이런 것들이 대한 답이 되지 않았습니다. 제가 직접 찾아보고 나니 이제는 대답을 할 수 있을것 같더라구요. memo에 props를 50개를 넣었지만, 실제로 호출시에 3개만 넘겨준다면, 그 3개만 비교하게 될 것입니다. React.memo 이 HOC는 주어진 props를 비교하지만 좀 더 자세히 비교를 합니다. 그리고 시간이 꽤나 걸릴것 같은 작업입니다. areHookEquals보다 가격이 훨씬 비싸답니다. d.. 2022. 3. 9. [React] Optimization, useMemo, useCallback, memo - (1) 반갑습니다 ^^ 최근에는 chrome profiler 사용법을 익히고, 렌더링에 얼마나 걸리나 이런것들을 보는 재미로 지내고 있습니다. Profiler 보는법은 다음번에 포스팅을 해보도록 하겠습니다. 서론이 좀 길 수 있지만, 참고 읽어보시면 분명 도움이 될 것이라고 확신합니다. 일반적인 사람들의 오해 렌더링이 적으면 무조건 속도가 빠르다 -> React.memo 등 최적화를 위한 HOC나 hook들을 사용합니다. 하지만 이 말은 틀렸다고 생각합니다. 잘못된 케이스의 경우를 생각해보겠습니다. - deps가 어떻게 비교되어 작동되는지 모른다면, 무조건 렌더링이 되고, 비교함수도 호출 되므로 더 느려집니다. - 렌더링을 방지하려고 deps에서 비교하는 시간이 더 들 수 있습니다. 어떻게 사용해야 할까? 이미.. 2022. 3. 7. [Coursera] 인생을 걸고 한 약속에서 성공한 이야기 https://blog.naver.com/rbals0445/222422574844 [WEB] React, Framework or Library?, SPA(Single Page Application) 오늘은 Framework와 Library의 차이에 대해서 알아보고, React는 어떤것일까? 에 대해서 알아보겠습니다... blog.naver.com 지난 과거.. 7월 7일.. 코세라강의 수강을 시작하며 이런말을 했습니다. 1달간의 기간동안.. 이러다 내 인생이 망해버리는건 아닌지.. 굉장히 귀찮고, 그냥 대충넘어가기엔 또 성격상 마음이 불편해서.. 시간이 오래걸렸습니다. 하지만 결국!! 쿠헤헤헤헤헤헤헤 완강을 했습니다!!!! 사실 강의만듣고 과제하는건 그닥 어렵지 않았는데, 여기서 넓은 범위의 키워드와.. 2021. 8. 11. [WEB] React, Redux - 2. combineReducer, middleware, useDispatch, thunk... 반갑습니다. 이제 강의도 벌써 4주차 강의를 듣고있습니다. 마지막주라서 그런지.. 내용도 많아지고 복습하고, redux 문서를 다시 다 읽어야하기에 포스팅 시간이 오래 걸렸습니다. 그래도 여기에 쓰면서 생각이 정리되는것도 있어서 굉장히 좋습니다^^ combineReducer 여러개의 리듀서를 하나의 스토어에서 다 실행합시다. 지난번에는 Reducer가 한개밖에 없었습니다. 그래서 createStore(reducer) 을 하면 그냥 됐었죠. 하지만, Reducer 하나에 모든 state를 끼워넣고 매번 불필요한 복사, 여러 조건이 들어간 수정. 이런식으로 해야할까요? 아닙니다. reducer도 관심사에 맞게 여러개의 reducer로 분리할 수 있습니다. 여러개로 분리를 했다고 합시다. 그러면 이제 stor.. 2021. 7. 31. [WEB] React, useEffect 짧게. 반갑습니다. 빠르게 하겠습니다. Hook중에 useEffect가 있습니다. class형 컴포넌트의 라이프사이클에서 3가지를 합친것입니다. componentDidUpdate, componentDidMount, componentWillUnmount를 합친것입니다. 이걸 한개의 Hook에서 사용한다고? 오우 개꿀! 하지만 사용방법을 알아야겠죠? 네~ 알아보겠습니다 (요약만 보실분은 맨 아래만 보시면 됩니다) 기본 모양 useEffect(effect, deps); 이런 형태를 가지고 있습니다. useEffect는 side effect를 하게 해주는 훅 이라고 생각하시면 좋습니다. side effect는 여러가지가 될 수 있습니다. 값 올려주기, 비동기처리 함수 불러주기 등등.. 여러가지가 있을 수 있습니다. 그.. 2021. 7. 30. [WEB] React, Redux - 1 https://blog.naver.com/rbals0445/222444529706 [WEB] React, Flux Architecture 아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 이번에 강의 들으면서 Redux 배웠는데, 굉장히 깔끔한것 같더라구요. ... blog.naver.com 지난시간에 이어서, Redux 한편 뽑겠습니다 ^^ npm install redux; npm install react-redux; 이렇게 설치를 합시다!! Redux (상태 관리 컨테이너) 이녀석 죽입니다.. react-native로 뭘 만들고 있는데.. data를 맨날 route로 넘기니까 코드 짜는것도 불편하고 너무 지저분 했습니다. 근데 이걸 미리 알았더라면.. 정말 아름다운 구조입니다. 한번 똥을 싸.. 2021. 7. 26. 이전 1 2 3 다음 728x90
