Recat

리액트: 자바스크립트 라이브러리 사용자 인터페이스 만드는데 사용컴포넌트: 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체렌더링: 사용자 화면에 뷰를 보여주는 것리액트 라이브러리가 데이터 변환 시 마다 새롭게 리렌더링을 하면서 성능을 아끼고, 최저그이 사용자

HTML과 CSS html : tag사용 () SPA : single page application html page가 수십, 수백개가 된다면 어떻게 관리해야할까? 하나의 페이지만 존재하는 어플리케이션, 웹사이트 왼쪽은 멀티 페이지 어플리케이션, 오른쪽은 싱글페이지

개발환경 -node.js 설치(npm 자동 같이 설치 됨) -vs코드 설치 리액트란? 리액트: 자바스크립트 라이브러리, SPA를 쉽고 빠르게 만들어 주는 도구 뷰: 프레임워크 프레임워크 vs 라이브러리 : 제어권한 여부(라이브러리: 사용자가 흐름제어o) 특징 v

\*element라는 변수에 오른쪽 저장JSX: 자바스크립트 + html필수는 아님 create element를 사용하면 되기 때문=> 그렇지만 jsx: 가독성 좋고 편리함createElement: type, props, ...children 사용

: 리액트앱을 구성하는 가장 작은 요소Dom element: html, 화면에서 볼 수 있는 것react element: 가상의 엘리먼트, Dom보다 크고 무거움type, props, childrentype: html 태그props: (나중에 다룸)children: 하

componentprops: component의 속성: 붕어빵 재료read only: 값을 변경할 수 없다3가지 props{} 중괄호: JS일 때, => 정수, 변수, 문자열 등일 때 사용해야함JSX를 사용하지 않은 경우

:리액트 컴포넌트의 변경가능한 데이터렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함=> 계속 바뀌니까setstate를 사용해야함!!!state 선언정해진 작업 수행state 업데이트위해 setstate 사용시작, update, die, => 콘솔에

함수 컴포넌트의 lifecycle 기능 수행하기 위한것 = hook이름앞에 use붙여야함count 함수의 변수로 선언하면 count는 올라가는데 재렌더링이 일어나지 않아 화면에는 표시되지 않음 !!!usestate를 사용하여 업데이트해야함\-> const count,

몇가지 install1\. 반응 라우터앱 내 탐색 및 경로 지정용.2\. Redux 툴킷(상태 관리를 위해 Redux를 사용하는 경우)전역 상태를 관리합니다.3\. 스타일CSS-in-JS를 사용하여 구성 요소를 스타일링하는 경우.4\. 반응 아이콘