[참고: Suspense] – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-image="https://scrap.kakaocdn.net/dn/cIBo4A/hyW2PgrBzX/WAkmyEkDZsl3ztJjxf1Sx0/img.png?width=1080&height=567&face=0_0_1080_567,https://scrap.kakaocdn.ne..
[참고: Synchronizing with Effects] Synchronizing with Effects – ReactThe library for web and native user interfacesreact.devSome components need to synchronize with external systems. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. 리액트 공식문서를 살펴보다보면 흥미로운 카테고리가 존재합니다.Escape Hatches 라는 탈출구라는 카테고리입니다. 여기에 속해있는 내용들을 살펴보면, ref / ..
[참고: Referencing Values with Refs] Referencing Values with Refs – ReactThe library for web and native user interfacesreact.devWhen you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. React에서 `ref`에 대해서 학습할 때, 보통 직접적인 DOM 조작을 위해서 사용한다고 배웁니다.물론 맞는 말입니다. 하지만 React 팀에서는 그 용도보다 강조하는 용도가 존재합니다상태를 저장하고 싶지만, 해당 상태가 렌더링 흐름에 관..
[참고: react.dev - Props and state are immutable] Components and Hooks must be pure – ReactThe library for web and native user interfacesreact.dev위의 react 공식문서는 React에서 불변성이 중요한 이유와 왜 불변성을 유지해야하는지에 대해서 설명하고있습니다.이 문서에서는 처음부터 전달하고 싶은 내용을 요약해서 제공합니다A component’s props and state are immutable snapshots. Never mutate them directly 컴포넌트의 props와 state는 불변의 스냅샷이므로, 이를 직접 수정하지 말라고 합니다.이 문장을 끊어서 보겠습니다. 컴포넌트..
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..
[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);..
2022년 말 ~ 2023년 지금까지 React 생태계에서 가장 큰 변화를 가져온 것은 NextJs v13으로의 업데이트일것입니다. 이전 버전들의 NextJs에서의 컨셉과 비교했을 때 정말 많은 변화가 생겼으며, 이러한 변화들을 하나씩 정리하려합니다, 1. React만 사용하는 것은 더이상 권장되지 않는다. 소제목을 조금 자극적으로 작성면도 있지만, 이 소제목은 실제로 React 공식 팀원이 말한 내용입니다 왜 이런 내용을 언급했을까요? React는 2013 ~ 2014년에 나온 프레임워크로, SPA라는 개념을 이용하여 빠른 페이지 이동등 많은 이점을 선보였고 이러한 장점에 힘입어 현재까지 가장 인기있는 자바스크립트 프레임워크 자리를 차지하였습니다. 하지만, SPA를 기반으로 하는 React에는 장점만큼..
