본문 바로가기

개발/React

(3)
[React18] 새로운 기능 : Automatic Batching React 18 부터  Automatic Batching 개념이 새롭게 등장했습니다. Automatic Batching을 한국말로 직역하면 '자동 일괄처리'를 뜻해요. 그렇다면 React에서 Automatic Batching은 어떤 기능을 의미하는 것인지 알아봅시다! 이 글은 react github 문서의 내용을 기반으로 작성했습니다.  Batching이란?Batching 기능은 React 17 이하 버전에서 일부 지원하는 기능이에요. 먼저 아래의 코드를 살펴봅시다!  Next 버튼을 클릭했을 때, handleClick함수가 실행됩니다. handleClick함수에서는 setCount와 setFlag 함수를 사용하여 count state와 flag state를 변경해주고 있습니다. React에서는 sta..
[React] 컴포넌트 Property type 가져오기 | Get component props type 상황블로그 글 내용을 표시하는 React 어플리케이션을 개발 중입니다. 각 글은 제목, 내용, 고유 ID 등의 다양한 정보를 가지고 있습니다. PostDetail 컴포넌트는 props로 전달받은 글의 제목과 내용을 표시합니다. interface PostDetailProps { post: PostType}function PostDetail({ post }: PostDetailProps) { return ( {post.title} {post.content} );}  MyParent 컴포넌트에서 PostDetail 컴포넌트를 사용하고자 합니다. PostDetail의 post 타입은 어떻게 추론할 수 있을까요? // MyParent.tsxfunction MyParent() ..
React useEffect 제대로 사용해보자! 이 글은 React 공식 문서 중 You Might Not Need an Effect 내용을 바탕으로 작성된 글입니다.  You Might Not Need an Effect – ReactThe library for web and native user interfacesreact.dev 불필요한 Effect를 제거하자A1. 랜더링 되는 동안 모든 것을 계산하기상황props로 전달받은 문자열 리스트를 보여주는 컴포넌트가 있다. 그 문자열 중 'filter'라는 문자열은 화면에 보여주고 싶지 않다. 불필요한 Effects 예시아래의 코드에서는 화면에 보여줄 리스트(filteredItems)를 따로 관리하고있다. useEffect가 initialList가 변경되었음을 감지하면 내부 state를 변경한다. 이는..