Front-End(Web)/React - 프레임워크(React, Next)
-
[React] cloneElementFront-End(Web)/React - 프레임워크(React, Next) 2023. 3. 22. 03:15
React로 개발하면서, 공통 UI 혹은 기능을 가진 랩핑 컴포넌트를 만드는 경우가 종종 있다. type Props = ButtonHTMLAttributes; function AddTravelerButton({ children, ...props }: PropsWithChildren): JSX.Element { return ( {children} ); } 이 랩핑 컴포넌트에서 Props로 받은 값으로 특정 속성을 만든다고 가정하자. 해당 컴포넌트에서 이 속성값을 사용하는 건 쉽지만, 내부의 {children} 에 이 속성값을 전달할 방법이 전혀 떠오르지 않았다. 이를 구현하기 위해 리서치해본 결과, cloneElement라는 React의 기능을 활용하면 되었다. 💙 cloneElement const clo..
-
[Next.js] Next.js 13 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2023. 1. 14. 03:05
🤍 Next.js 13 Next.js 12버전도 2021년 중순 업데이트 된 것으로 기억하는데, Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됬다. 체감상 가장 큰 변화를 느낄 것 같은 버전 체인지이다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는게 주요 컨셉이다. - 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Turbopack(alpha) : Rust 기반. Webpack 보다 7..
-
[React] Concurrency(동시성) - #4. Transition APIFront-End(Web)/React - 프레임워크(React, Next) 2022. 11. 3. 04:45
지난 포스팅에서 React 18의 주요 컨셉인 Concurrent Rendering(동시성 렌더링) 을 정리하였다. (포스팅) [React] Concurrency(동시성) - #3. Concurrent Rendering 🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하 abangpa1ace.tistory.com 이번 포스팅은 이를 실제로 구현하는 기능인 Transition API 들에 대해 정리하려고 한다. Hooks 들의 사용법들을 확인할 뿐만 아니라, 이들을 통해 기존의 Suspense(로딩) 방식에서 UX적으로 어떻게 나아지는..
-
[React] Concurrency(동시성) - #3. Concurrent RenderingFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 20:19
🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하려고 한다. Concurrent Rendering(동시성 렌더링)는 React 18버전이 릴리즈되면서 가장 강조하고 있는 컨셉이다. 정확히는, Parellel(병렬)이 불가능한 Javascript의 싱글 스레드 환경에서, 최대한 이와 비슷한 Concurrency(동시성)을 구현하는 것이다. React 18에 출시된 Transition API들을 통해 동시성 렌더링을 구현할 수 있으며, 이러한 환경을 앞으로 더욱 보장할 계획이라고 한다. * React 18 변경점(포스팅) : https..
-
[React] Concurrecy(동시성) - #2. Error BoundaryFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 19:58
지난 포스팅에선, Code Splitting(코드 분할) 그리고 이를 React에서 구현하는 Suspense와 React.lazy를 알아보았다. Suspense는 비동기 컴포넌트(React.lazy) 혹은 비동기 데이터 요청에 따른 선언적 Loading UI 노출에도 유용하다. 물론 이 비동기 요청에서 에러가 발생할 수 있고, 이를 위임하는 기능인 Error Boundary 에 대해 정리해보겠다. 💙 React의 Error Boundary 컴포넌트 내의 Javascript 에러가 발생하면, 컴포넌트 트리가 깨지며 정상적으로 렌더링되지 않는다. 기존에는 이를 처리 및 복구할 방법이 없었으나, React 16부터 Error Boundary 이라는 컨셉을 제안하게 된다. 이는, 자식 컴포넌트 트리에서 발생한 ..
-
[React] Concurrency(동시성) - #1. Suspense와 React.lazyFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 24. 02:53
🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능들을 함께 공부하면서 Concurrent Rendering(동시성 렌더링)까지 공부하게 되었다. 첫 번째 주제는 선언적 Loading UI와 Code Splitting(코드 분할)을 위한 Suspense와 React.lazy부터 시작된다. 기존의 비동기 렌더링 분기를 어떻게 사용했는지 알아보고 이것이 동시성 모드에서 어떻게 변화하려고 하는지 로 시리즈를 전개하려고 한다. 💙 Code Splitting(코드 분할) Suspense와 React.lazy를 바로 정리하..
-
[Next.js] next/link - <Link> 태그Front-End(Web)/React - 프레임워크(React, Next) 2022. 10. 3. 14:20
🤔 서론 본래는, Next 스터디를 진행하면서 에 Styled-Components를 적용하며 겪었던 이슈를 정리하려는 포스팅이었다. 그런데, Next를 처음 공부할 때에도 next/link를 정리한 적이 없어 이번 기회에 한 번 전체적으로 제대로 공부해보고자 한다! 🤍 next/link 및 태그 Next.js에서 페이지 간의 링크전환에 태그를 주로 사용한다. 페이지 리렌더링 없이 이동시켜주는 SPA 동작을 담당하며, 태그로 전환되어 SEO에 적합하거나 다음 페이지를 prefetch 하는 등의 장점이 있다. 그렇기에 네비게이션 바에서 많이 볼 수 있으며, 아래와 같이 사용될 수 있다. (pages 폴더 내 index.tsx, about/index.tsx, blog/[slug].tsx 세 가지 페이지에 대한..
-
[React] 자식 컴포넌트 제어 - forwardRef, useImperativeHandleFront-End(Web)/React - 프레임워크(React, Next) 2022. 9. 15. 04:37
사이드 프로젝트에서 Uncontrolled Input을 구현하기 위해 고민하던 중, 문득 자식(input)의 ref.current.value를 부모(container component)가 어떻게 참조할 수 있을까에 대한 의문이 생겼다. * ref, useRef() 포스팅 : https://abangpa1ace.tistory.com/248 [React] Hooks - useRef() 회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 abangpa1ace.tistory.com 가장 심플하게, 자식인 React 노드에 ref를 줘보았고, 아래와 같은 에러 메세지를 띄워..