반응형

react 8

리액트 생명주기와 useEffect

React 컴포넌트의 생명주기 사람이 태어나고, 성장하고, 죽는 것처럼 React 컴포넌트는 생명주기를 갖는다. 바로, " 생성 - 업데이트 - 제거"의 과정이 그것이다. 생성될 때 (Mount) constructor로 정의해놓은 것들이 실행되고 render되면서 mount(생성)된다. 업데이트될 때 (Update) 업데이트는 props나 state가 변경되었을 때 발생한다. 제거될 때 (Unmount) 상위 컴포넌트가 하위 컴포넌트를 더이상 그리지 않을 때, unmount(제거) 된다. (클래스 컴포넌트 기준으로) 모든 컴포넌트는 render 메서드를 갖는다. render 메서드는 웹 컴포넌트를 실제 DOM 요소에 그려주는 역할을 한다. render 메서드는 제거될 때를 말고는 모두 실행되는데, 그 전..

Frontend 2024.03.02

[React] Virtual DOM과 동작원리

1. Virtual DOM이란? virtual DOM은 실제 DOM을 추상화한 자바스크립트 객체이다. 실제 DOM이 갖고있는 속성들(id, class, style, innerHTML 등)을 virtual DOM도 갖고 있다. 하지만 DOM API(getElementById, querySelector 등)는 갖고 있지 않기 때문에 실제 DOM보다는 가볍다. 2. Virtual DOM의 예시 let domNode = { tagName: 'div', attributes: { id: 'container', class: 'container', style: 'background-color: red;' }, children: [ { tagName: 'h1', attributes: {}, children: ['Hell..

Frontend 2024.02.23

[React] ref와 useRef 훅

1. Ref란? ref는 DOM을 직접적으로 건드려야하는 때 사용합니다. 순수 js로 컴포넌트를 제어하는 방식으로, ref는 current 프로퍼티를 가진 객체입니다. 2. id가 아니라 ref를 사용하는 이유는? id는 DOM에서 유일해야하는데, React 컴포넌트는 여러번 사용될 수 있기 때문에 id를 사용하는것이 적절하지 않습니다. 반면에, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문입니다. 3. ref를 사용하는 방법 3-1. 클래스형 컴포넌트에서 사용하는 방법 React.createRef 메소드를 사용합니다. 변수명.current로 접근할 수 있습니다. React 16.3 버전부터 사용 가능합니다. class RefSample extends Component { input..

Frontend 2024.02.16

[@tanstack/react-query] Query Status와 Fetch Status

React Query에는 2가지의 Status가 있다. 이 2가지 Status의 상태와 그것이 가지는 의미를 구분하여 파악해보자. 1. Query Status 의미 - 실제로 받아온 data 값이 있는지 없는지를 나타내는 상태값 확인 방법 - useQuery의 결과값에서 status 값을 통해 확인 가능하다. 3가지 종류의 상태 값을 갖는다. - 1. pending : 데이터를 아직 받아오지 못한 상태일때. - 2. success : 데이터를 성공적으로 받아왔을 때. - 3. error : 데이터를 받아오는 중에 에러가 발생했을 때. 2. Fetch Status 의미 - queryFn() 함수가 현재 실행되는중인지 아닌지를 나타내는 상태값 3가지 종류의 상태 값을 갖는다. - 1. fetching : 쿼..

Frontend 2024.01.29

[Monorepo] yarn workspace 모노레포 내의 컴포넌트가 import 되지 않을 때 해결법 (@babel/runtime, yarn berry와 npm의 차이)

[Monorepo] yarn workspace 모노레포 환경 내의 컴포넌트가 다른 패키지에서 import 되지 않을 때 해결법 (@babel/runtime) 1. 문제 상황 프로젝트를 시작하면서 yarn berry workspace를 통해 모노레포 환경을 구축하였다. 위 그림과 같이 프로젝트의 주요 목표가 될 '서비스 어플리케이션'들끼리 공통적으로 사용할 컴포넌트들을 package 폴더 안에 '공통 컴포넌트 패키지'로 만들어 컴포넌트 재사용성을 높이고자 하였다. Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray 그러나 다음과 같은 메시지를 뱉으며 불러오지 못하는 문제를 겪었다. 2. 원인 진..

Frontend 2024.01.19

디자인시스템구축, 어떤 것으로 할 것인가? 컴포넌트기반 vs 클래스기반 비교 [유데미 스나이퍼팩토리 10주완성 프로젝트 캠프 프론트엔드(리액트/react)]

1. 컴포넌트 기반 디자인 시스템: 컴포넌트 기반 디자인 시스템에서는 구조와 스타일링이 포함된 재사용 가능한 UI 컴포넌트를 만듭니다. 장점 캡슐화: 컴포넌트는 기능과 스타일을 캡슐화하여 자체적으로 동작하며, 프로젝트 전체에서 재사용할 수 있습니다. 모듈성: 컴포넌트를 조합하고 결합하여 복잡한 UI를 구축할 수 있습니다. 재사용성: 컴포넌트는 프로젝트 전반에서 쉽게 재사용할 수 있어 일관성을 유지하고 중복을 줄일 수 있습니다. 유지 보수성: 컴포넌트의 변경 사항은 격리되어 유지 관리가 용이합니다. 고려 사항 학습 곡선: 팀 구성원은 컴포넌트 API와 사용 패턴을 익혀야 합니다. 개발 오버헤드: 컴포넌트 라이브러리 생성 및 유지 관리에는 추가 개발 작업이 필요합니다. 유연성: 모든 사용 사례를 커버하지 못..

카테고리 없음 2023.07.19

[유데미 스나이퍼팩토리 10주완성 프로젝트 캠프 프론트엔드(리액트/react)]

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다. HTML5는 웹 개발자들이 웹 페이지의 구조를 명확하게 표현할 수 있도록 다양한 시멘틱 태그를 도입했습니다. 이들 태그를 사용하면 검색 엔진이 페이지의 각 부분을 더 잘 이해하고, 웹 접근성 도구가 사용자에게 콘텐츠를 더 효과적으로 전달할 수 있습니다. 다음은 주요 HTML5 시멘틱 태그의 예입니다: : 페이지의 상단 부분을 표시하며, 주로 로고, 제목, 주 메뉴 등을 포함합니다. : 네비게이션 링크들을 그룹화하는데 사용됩니다. 사이트의 주요 링크나 메뉴를 포함합니다. : 웹페이지의 핵심 콘텐츠를 나타냅니다. 은 고유한 콘텐츠를 표시하는데 사용되며 페이지 당 한 번만 사용되어야 합니다. : 독립적으로 재배포하거나..

카테고리 없음 2023.06.12

[유데미 스나이퍼팩토리 10주완성 프로젝트 캠프 프론트엔드(리액트/react)] 액티비티 다이어그램 만들기

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다. 축구팀 운영진 어플리케이션은 효율적이고 원활한 축구팀 운영을 지원하기 위한 도구입니다. 이 앱은 다양한 기능과 모듈을 제공하여 팀 관리자와 코치, 선수들이 팀 운영에 필요한 작업을 보다 효율적으로 수행할 수 있도록 돕습니다. 액티비티 다이어그램은 이 앱의 핵심 기능과 작업 흐름을 시각적으로 보여줍니다. 예를 들어, 앱이 시작되면 로그인 화면이 나타나고, 사용자는 자신의 계정으로 로그인할 수 있습니다. 인증이 완료되면, 메인 대시보드가 나타나며 여기에서 사용자는 팀 관리, 일정 관리, 선수 관리, 통계 및 보고서 등 다양한 작업에 접근할 수 있습니다. 팀 관리 기능을 통해 사용자는 새로운 팀을 생성하거나 기존 팀을..

카테고리 없음 2023.06.09
반응형