Web Study/원티드 프리온보딩 4월 FE3 프리온보딩 1주차 첫번째 강의 아직 리액트 할 줄 모르지만... 일단은 귀동냥을 해보기로 했다. 모르는 개념은 열심히 서칭했다. vite 로 리액트 프로젝트 init 하기 npx create-react-app 대신 새롭게 나온 번들링 툴 (새로운 기술) - 번들링이 매우 빨라짐 -> 빌드 시간이 빨라짐, 개발에 편함 - webpack, rollup, parcel 등을 ESBuild 라는 것으로 대체 - 리액트에서 타입스크립트는 필수! VirtualDOM 역할 최적화된 업데이트로 사용자 경험 개선 - 브라우저에 반영하기 전에 사전작업을 하는 것 업데이트에 우선순위를 부여 - Animation 과 Text Fiber 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진 리액트 Fiber 의 목표는 애니메이션, 레.. 2023. 4. 3. React Hooks - useState, useEffect Hook? 함수 컴포넌트에서 리액트 state 와 생명주기 기능을 연동할 수 있게 해주는 함수를 의미 (class 없이 리액트를 사용할 수 있게 해주는 것) Hook 은 React 버전 16.8부터 리액트 요소로 새로 추가 되었다. Hook 을 사용하여 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있다. Hook 은 props, state, context, refs, lifecycle 과 같은 리액트 개념에 좀더 직관적인 api 를 제공해준다. 생명주기 메서드를 기반으로 쪼개는 것보다 훅을 통하여 서로 비슷한 것을 하는 작은 함수를 묶음으로 컴포넌트를 나누는 방식이 직관적으로 이해하기 용이하다. https://ko.reactjs.org/docs/hooks-o.. 2023. 4. 1. 원티드 프리온보딩 FE 4월 사전과제 제출 전 정리 이번에 알게되어 참가하려고 공부해본다. 다만.. 아직 리액트를 배운지 며칠 되지 않아서 Hooks 이라든가 라이프사이클? 이런걸 모르기에 시작하기 전에 힘내서 공부해둘 예정이다. React 라이프 사이클 클래스형 컴포넌트에서 사용했던 것으로 요즘 주로 사용되는 함수형 컴포넌트에선 지원하지 않는다고 알고 있다. 대신 Hook 이라는 기술을 사용한다는데, 그럼에도 불구하고 알아둬야 하는 이유는 클래스형 컴포넌트를 함수형 컴포넌트로 리팩토링 해야 하는 일이 생길 수 있기 때문이라고 본다. 라이프 사이클은 컴포넌트가 생성되고 업데이트 되고 파괴될 때 일어나는 일련의 단계이자 생명 주기이다. 크게 3가지로 나눠지며 라이프 사이클 메서드를 통하여 제어할 수 있다. 1. 생성 Mounting 컴포넌트가 DOM 상에 .. 2023. 3. 26. 이전 1 다음
