몇주간 react 19에 대해서 말들이 많길래 궁금해서 찾아보았습니다대부분 깃허브나 레딧을 번역한것이기때문에 잘못된 내용이 있을수있습니다관련 링크들 - 깃허브 이슈 - Reddit React 19 변경점 - React 19에서는 suspended 컴포넌트와 같은 레벨의 컴포넌트들을 미리 렌더링하지 않도록 변경된다고함 문제 제기 - 깃허브 1. 병렬 데이터 로딩 불가능 function ParentComponent() { return ( ..
React에서 상태를 다루다 보면 이전 상태에 기반해서 상태를 업데이트를 해야하는 경우가 많습니다 예를들어 토글 버튼이 있을 수 있습니다.버튼을 클릭할때마다 드롭다운이 나타나고 사라지는 예시가 될 수 있습니다. 그럴때 아래와 같이 코드를 작성할 수 있습니다.const [isOpen, setIsOpen] = useState(false)const dropdownHandler = () => { setIsOpen(!isOpen)} 하지만 위와 같이 작성한 코드는 React 팀에서 권장하는 코드가 아닙니다.React 공식문서 Updating state based on the previous state useState – ReactThe library for web and native user interfacesr..
렌더링이란? 일반적인 렌더링 의미: 초기 입력을 받아 최종적으로 사용할 수 있는 결과물을 생성하는 과정 리액트에서 렌더링 의미: 이전 스냅샷과 최신 스냅샷의 차이를 찾아(리렌더링) + 차이가 존재하면 DOM을 업데이트(리페인팅)하는 프로세스 리렌더링은 리페인팅이 아닙니다. 리렌더링은 무엇을 변경해야 하는지 파악하는 React의 프로세스 중 하나입니다. 리페인팅은 DOM이 변경될 때마다 브라우저가 관련 픽셀을 다시 그리는 프로세스입니다. 즉, 리렌더링이 일어나도 스냅샷간의 차이가 없다면 DOM을 업데이트하지 않습니다. 리렌더링 !== 리페인팅 리액트는 아래의 과정으로 리렌더링을 수행합니다 React는 렌더링이 될 때 스냅샷을 찍습니다. 그후 상태 변경등으로 인해 이전 스냅샷과 최신 스냅샷의 차이가 발생하면..
[React 문서 링크] 2024년 2월 15일에 React 팀에서 올린 2024년 5월에 React Conf가 있다는 글 입니다. 여기에는 React의 변경 내용을 예고하고있습니다. 주요 변경 내용 1. 리액트 컴파일러 선요약: 기존에 useCallback, useMemo, memo 등과 같은 메모제이션 기능등이 기본적으로 적용 리액트 컴파일러는 자바스크립트와 리액트의 규칙을 모델링하여 안전하게 코드를 컴파일합니다. 이는 컴포넌트가 동일한 입력에 대해 동일한 값을 반환해야 하며, props나 상태 값을 변경해서는 안 된다는 리액트의 규칙을 포함합니다. 2. Actions 선요약: 클라이언트와 서버 간 데이터 전송을 위해 Actions 기능이 도입 Search Actions는 과 같은 DOM 요소에 함수..
[깃허브 링크] GitHub - joseph0926/react: react 개념 정리 re react 개념 정리 re. Contribute to joseph0926/react development by creating an account on GitHub. github.com React의 작동 원리 let virtualDOM = null; function render(reactEl, containerDOMEl) { const newVirtualDOM = createVirtualDOM(reactEl); if (!virtualDOM || virtualDOMHasChanged(virtualDOM, newVirtualDOM)) { updateRealDOM(containerDOMEl, newVirtualDOM);..
- Router loaderloader 함수는 원래 remix라는 react 프레임워크에서 데이터 패칭을 수행하는 하나의 메커니즘이지만, react-router가 최신버전으로 업데이트되면서 해당 메커니즘을 채택하고 사용하기 시작하였습니다.loader는 기본적으로 페이지(컴포넌트)에서 데이터를 패칭합니다- react-query useQueryreact-query는 데이터 패칭, 데이터 변경, 캐시 관리등에 사용되는 react 패키지입니다useQuery는 기본적으로 hook이므로 컴포넌트가 마운트될때 데이터를 패칭합니다 - loader vs useQueryloader는 loader가 정의되어있는 컴포넌트와 매치되는 path가 트리거되면 데이터를 가져옵니다 반면, useQuery는 path가 트리거된 후 매치..
올해 초부터 제가 구독 또는 관심있게 보는 해외 개발자들이 비슷한 주제로 영상, 글들을 올렸습니다. 이들이 공통적으로 말하는 것은 React에 대한 전망과 create-react-app에 대한 이야기 였습니다. 두 주제 모두 관심있게 보았지만, 이번글에서는 좀 더 체감되는 주제인 create-react-app에 대해서 글을 작성 해보려 합니다. 1. 왜 create-react-app에 대한 우려(불만)의 소리가 나오는가 아마 react를 공부하고 사용할 때, 대부분 CRA를 통하여 프로젝트를 생성할 것입니다. 저또한 그래왔고 공식문서에도 그렇게 하라고 써져있습니다. 근데 왜 많은 개발자들이 CRA에 대해서 의문을 던지고 심하게는 사용하지 말라는 소리가 나왔을까요? 개발자들 마다 여러 이유들을 제시하고, ..
리덕스의 리듀서 함수에는 중요한 규칙이 하나 존재한다. 반드시 순수함수이며, 사이드이펙트가 없고, 동기식이어야한다. 하지만 웹 애플리케이션을 구축하다보면, 필수적으로 사이드이펙트 & 비동기 코드가 들어가야할때까 존재한다. 이럴때는 어떻게 처리해야할까? 이 글에서 알아볼 것 Redux에서 SideEffect & Async 사용 방법 Redux에서 SideEffect & Async - 컴포넌트 Redux에서 SideEffect & Async - 액션 생성자 1. Redux에서 SideEffect & Async 사용 방법 리덕스에서 사이드이펙트 & 비동기 코드를 사용하는 방법은 2가지이다. 컴포넌트에서 처리 컴포넌트에서 사이드이펙트등이 처리된 후에만, 리덕스에게 액션을 보낸다 따라서, 리덕스는 사이드이펙트등의..
