React17 리액트 배칭(Batching)의 모든 것 리액트 배칭(Batching)의 모든 것 - 예시와 설명을 잘해두었습니다. 배칭: 리액트의 상태값을 일정한 주기로 처리하는 작업 React v18 이후 createRoot 함수를 사용함으로써 Automatic Batching 기능이 가능해졌습니다. 따라서 이벤트 핸들러 함수 내에 여러 setter가 사용되어도 같이 배칭으로 묶어서 처리해줍니다. 기존에는 여러 번 렌더링이 일어났어요. 참고 - 요즘 IT 2024. 3. 13. 최근 FE의 생태계의 움직임 (feat. Next/React, Tailwind) 테일윈드 기반 UI 컴포넌트 라이브러리 - Tailframes 위 라이브러리가 있는 것을 보고 생각이 든 점이 요즘 CSS-in-JS 즉 Styled-components나 emotion 같은 CSS는 지양되고 있습니다. 런타임 시 실행되고, 번들 사이즈 증가 등 오버헤드 관련 문제가 있는데 아무래도 FE 생태계를 꽉 잡고 있는 Next.js가 테일윈드를 권장하고 있기 때문입니다. 공식문서 예제를 보더라도 테일윈드로 되어 있고 아무래도 SSR과 서버 컴포넌트 사용 관점에서 스타일을 적용하기 힘들다는 점이 제일 크죠. 그래서 테일윈드 기반으로 편리하게 많이 사용되고 있는 것 같습니다. 물론 vanilla extract css와 같이 Zero-runtime 방식이 있긴 한데 아직은 Next에서 클라이언트 컴포.. 2024. 3. 11. [World Article #9] React Design Patterns: You Should Know in 2023 - by Saurabh Barot (작성중...) 1. The HOC (Higher Order Component) Pattern - memo (React 내장 HOC) - withRouter (React-Router) - connect (React-Redux) - withStyles (MUI) - Q. class형 말고 함수 컴포넌트로 작성 가능? - Q. Redux의 flux 패턴이란? - 예시) memo, withRouter 2. The Provider Pattern - React-Redux, Mobx 등 상태 관리 라이브러리의 기본 - React 내장 Context API 기반 - 핵심은 Avoid Props Drilling - Q. 그 사이 props 필요없는 컴포넌트도 리렌더링 같이 발생? - 예시) 어드민 3. Presenta.. 2023. 10. 18. [Trouble Shootings #14] React - useState hook의 Lazy Initializing 이때까지 항상 습관적으로 React에서 useState 훅의 기본값을 그냥 넣어서 사용해왔습니다. 하지만 이전에 어떤 영상에서 useState 기본값으로 콜백 함수를 넣는 것을 본 적이 있습니다. 당시에 무거운 데이터 같은 경우에 최적화를 고려하여 콜백 함수로 넣을 수도 있다(?)로만 막연하게 잘못 인지하였습니다. 오늘 저녁 당시의 궁금증이 다시 상기되어 찾아봤습니다. 우선 결론적으로 useState 기본값으로 항상 해왔던 방식으로 원시값 ex) 문자열, 숫자, 불리언 등 을 세팅하거나 react-query로 서버 상태 관리하기 이전 방식인 useEffect 를 사용하여 api 초기 데이터를 넣을 수 있습니다. (물론 useEffect를 사용하면 초기에는 데이터가 없어서 깜빡거릴 수 있는데 스켈레톤이나 .. 2023. 1. 27. 이전 1 2 3 4 5 다음 반응형