[React] Hooks

Hook 이란?react의 상태 및 life-cycle 관리를 위한 함수이다. Hook의 3원칙컴포넌트 내에서만 작동한다.컴포넌트/커스텀훅 내부에서만 호출해야 한다!기능을 여러 훅으로 나누면 좋다!나누어 있어도 컴포넌트에서 한번에 순차 호출 - 함수형 컴포넌트 ⇒ 함수 ⇒ 기능 단위 분리 ⇒ ⇒ 가독성 ⇒ 테스트 및 유지보수에 유리컴포넌트의 최상위 레이어(스코프)에서만 호출해야 한다!블록 내부에서는 호출할 수 없다!Hook의 종류 (React18기준)React 19에서는 useMemo 와 useCallback, memo 등을 전부 자동화 하여 해주기 때문에 사용할 필요가 없어졌다...!추가된 Hooks (React 19) 각각의 훅들에 대해서는 따로따로 작성해볼 생각이다~

• format_list_bulleted Dev/React
• · 2025. 5. 13.
• textsms

[React] Virtual Dom 파헤치기

왜 React를 쓰는가??React 는 virtual dom 이 있기 때문이지! virtual dom 이 뭔데?! 이제 알아보자 😄 Virtual Dom 이란?Virtual DOM(가상 DOM)은 UI 업데이트의 효율성을 극대화하기 위해 실제 DOM(Document Object Model)의 가벼운 복사본을 메모리 상에서 유지 관리하는 기술이다. DOM 조작이 느린 브라우저 환경에서 성능을 개선하는 데 중요한 역할을 한다. React에서의 Virtual Dom 작동방식React는 Virtual DOM을 기반으로 컴포넌트를 효율적으로 렌더링한다. 위 그림과 같이 우리가 html 을 직접 조정하는 것 같지만 실은 우리는 실제 돔 트리의 node 가 아닌 React.node 를 조작하고 있다는 것이다. 그렇..

• format_list_bulleted Dev/React
• · 2025. 5. 13.
• textsms

[React] 리액트 시작하기

Quick Start일단 리액트 프로젝트 를 시작하는 방법은 여러가지 인데 그 중 CRA(Create-React-App) 와 vite 를 사용하는 방법이 있다. CRA 는 bundler로 babel + webpack 을 사용하는 방법으로 꽤 느린 편이기 때문에 최근에는 잘 사용하지 않는 편이다. vite를 사용하는 방법을 보면vite는 bundler 중에서 Esbuild 와 Rollup 방식을 합친 방식이다. Rollup 은 js 로 만들어졌고, Esbuild 는 go 언어로 만들어졌다. js는 성능상 한계가 있기 떄문에 go 언어로 만들어진 Esbuild는 훨씬 빠르다. 이 두 번들러의 장점을 합친 것이 vite 이다. 따라서 최근에는 vite 를 많이 이용한다. 근데 여기서 또 SWC 옵션도..

• format_list_bulleted Dev/React
• · 2025. 5. 12.
• textsms