윤코딩 윤코딩

React Hook(훅) 이란? https://react.dev/reference/react/hooks Built-in React Hooks – React The library for web and native user interfaces react.dev React 16.8 버전에서 새로 추가된 기능으로, 기존의 Class형 Component을 사용하면서 발생하는 문제점들을 해결하기 위해 도입됨 Component에 대하여 리액트에서는 UI를 "컴포넌트"라는 단위를 이용하여 구분함. 컴포넌트 관리의 핵심은 state와 생명주기를 다루는 것에 있음. Class형 컴포넌트와 함수형 컴포넌트로 나뉨 Class Component [정상우님의 블로그] 에서 코드의 예시를 가져왔습니다. class Home exte..

📌장점 1. 높은 자유도 태생 자체가 프레임워크가 아니라 Javascript언어 기반의 라이브러리이기 때문에 개발자가 때마다 필요한 기능을 골라서 사용할 수 있음 컴포넌트 제작 단계에서도 하나의 파일에 여러 개의 컴포넌트를 만들어서 사용할 수 있고, 파일 내에서 함수를 export만 해주면 모두 컴포넌트로 가져다 쓸 수 있음. (Vue와 Svelte의 경우 하나의 파일 당 하나의 컴포넌트만 정의 가능) 2. 컴포넌트 기반의 아키텍처 재사용 가능한 컴포넌트 제작으로 생산성과 유지보수가 용이 파일 내에서 새로운 함수형 컴포넌트를 생성하는 방법으로 컴포넌트 분리가 가능 3. 성능 최적화 Virtual DOM을 사용하여 렌더링을 최적화 컴포넌트 레벨에서 useMemo, useCallback를 이용한 최적화를 제..

React의 특징 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리로, Javascript를 기반으로 함. JSX(JavaScript XML) 문법 사용. 가상 돔(Virtual DOM)을 사용하여 UI렌더링을 최적화. 단방향 데이터 바인딩의 특성. 선언형 프로그래밍 컴포넌트 기반의 UI관리. 그렇다면 지금부터 위에서 설명한 React의 특징을 하나씩 살펴보자. JSX(JavaScript XML) HTML 요소에 유효한 자바스크립트 객체를 내장할 수 있는 자바스크립트 확장이다. Vanilla JS에서는 html과 script를 나누어서 작성했지만, React환경에서는 자바스크립트에서 HTML을 작성할 수 있도록 해주는 것이 큰 장점 📌XML이란 eXtensibla Markup..