Web9 [React] 함수형 컴포넌트를 권장하는 이유? React에 클래스형 컴포넌트를 지양하고 함수형 컴포넌트를 권장하는 이유가 궁금했습니다.우선 클래스형 컴포넌트는 컴포넌트가 언제 렌더링되고 파괴되는지(Lfiecycle), 그리고 각종 정보(DOM node 주소, Component 의 Instance)등을 가지고있습니다.클래스형 컴포넌트함수형 컴포넌트가 등장하기 이전의 컴포넌트 형태입니다.class ParentComponent extends React.Component { constructor(props) { super(props); this.childRef = React.createRef(); // 자식 컴포넌트 참조 this.state = { showChild: true }; } toggleChild = () => { thi.. 2025. 3. 10. [CS] 브라우저에 URL을 입력하면 일어나는 일 멀티 프로세스 브라우저브라우저 프로세스주소 표시줄, 북마크, 뒤로/앞으로 버튼 등 UI 요소 제어다른 프로세스들과의 조율 및 관리 담당렌더러 프로세스웹 페이지 콘텐츠 처리 및 표시탭마다 별도의 프로세스 생성GPU 프로세스여러 탭의 렌더링 작업을 통합 처리하드웨어 가속을 위한 별도 프로세스로 분리플러그인 프로세스웹사이트에서 사용하는 플러그인 제어캡처 플러그인, OneTab 등의 기능 처리유틸리티 프로세스네트워크 요청, 파일 접근 등 권한이 필요한 작업 처리프로세스끼리는 IPC(Inter Process Communication, 프로세스간 통신)을 사용한다.사용자가 브라우저에 URL을 입력 후 웹사이트가 보이기 까지의 과정Handling inputs사용자가 URL에 Text를 입력하면Browser Proce.. 2024. 12. 19. [React] Error Boundary란? Error BoundaryUI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 됩니다. React 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계(“error boundary”)라는 새로운 개념이 도입되었습니다.컴포넌트 생성Vite를 통해 생성하면 제공되는 App.tsx의 일부를 수정하였습니다.결과App에서 이미지를 보여주는 내용과 하단에 보이는 텍스트가 props를 받을수 있도록 컴포넌트를 생성했는데, 위 코드에서는 props를 전달해주고 있지 않습니다. 이렇게 되면 에러가 발생하겠죠?ErrorBoundary 적용ErrorBoundary를 적용하지않으면 에러를 캐치하지 못하고 앱이 중단상태가 되어 사용자 경험에도 별로 좋지 않습니다. 이런 상황을 고려.. 2024. 12. 5. [React] React-Query 뽀개기 이번글에서는 React에서 서버측 데이터 캐싱할 때 자주사용되는 React-Query에 대해 알아보겠습니다. https://tanstack.com/query/v5/docs/framework/react/overview TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식문서에 소개된 내용중에 React-Query를 사용하면 좋은점에 대해 소개되어있습니다.1. 애플리케이션에서 복잡.. 2024. 11. 26. [React] 프로젝트 관리 시스템 만들기(feat . Supabase) 안녕하세요! 저는 이번에 React를 공부해보면서 프로젝트 관리 시스템을 만들어 보려고합니다.저는 새로운 것을 배울때 이론적인 부분은 어느정도 공부해놓고, 그 이후에 무언가를 만들어보면서 부족한 부분을 채워나가는 편입니다. 우선 무엇을 만들지 정해야하는데 저는 프로젝트 관리 시스템(Project-Management-System) 줄여서 PMS 라고 표현하겠습니다. 위 내용을 구현하기 위해 저는 Supabase를 이용하기로 했습니다. 저는 백엔드 개발을 할 줄 모르기 때문에 다양한 기능(인증, Edge Function) 등 유용한 기능을 제공하여 개발시간을 단축시켜주고 있습니다.주요 기능PMS는 사용자가 프로젝트와 목표를 관리할 수 있는 시스템인데 아래에서 구현하려는 기능을 요약해보았습니다.기능 소개인증로.. 2024. 11. 21. [React] 렌더링 과정 알아보기 이전 글에서 우리가 작성한 코드가 브라우저상에 나타나기까지의 과정을 소개한 적이 있습니다. React를 시작 하기 전(feat. ES6)주말에 가만히 누워서 유튜브를 보던중 ... 평소에 공부해볼까 말까 하던 리액트에 갑자기 꽃혀서 마구 뒤져보기시작했습니다. 하지만 아는거라곤 예전에 배운 학교에서 배운 HTML, CSS, JavaScriptmy0366.tistory.com 위 글을 읽어 보면 6개의 과정이 이루어 지는데, 6번째에 대해서는 설명을 적어두지 않았습니다. 여기서 우리가 사용하는 라이브러리 ( Next.js, React.js ) 들이 초기화 되고 화면에 그려지게 됩니다. 지금 제가 공부하고 있는 React에서는 이 6번의 과정에서 2개의 Phase로 이루어져 있습니다. Render Pha.. 2024. 11. 12. 이전 1 2 다음
