React

컴포넌트 별로 CSS 생성1. 개념파일명.module.cssimport 참조변수 form './파일명.module.css';개발자 도구에서 보면 '파일명클래스명아무말' 이라고 설정된다 2. 예제// day04/src/componentsTest03.jsxTest03.cssTest03.module.css  모달창/src/components/AlertModal.js/src/components/ConfirmModal.js /src/css/AlerModal.css/src/css/Confirm.css

HooksReact의 상태 관리 및 생명주기 처리 도구 (컴포넌트의 상태 관리 및 생명주기 관련 개념) https://ko.reactjs.org/docs/hooks-state.html Hook은 React 16.8버전에 새로 추가되었다Hook 은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있다Hook 의 개요 함수형 컴포넌트는 렌더링할 때마다 내부의 것들을 기억하지 못한다다시 생성, 초기화 해야한다(변수, 함수 등) 내부의 것들을 유지하기 위해서 hook이 등장했다 useState컴포넌트 내에서 상태 값을 관리useRef참조값(Ref) 관리, DOM 요소 직접 접근useEffect사이드 이펙트(부수효과) 처리 및 생명주기 관리useMemo계산된 값의 메모이제이션(캐싱) ;컴포..

day01day01_vite프로젝트 생성npx create-react-app day01npm create vite@latest day01_vite서버 켜기cd day01npm startcd day01_vitenpm installnpm run dev  React1. 개념사용자 인터페이스(UI)를 구축하기 위해 메타(페이스북)에서 개발한 Javascript 기반의 라이브러리SPA(Single Page Application) 개발에 가장 적합한 라이브러리화면상에 데이터가 변경되는 경우 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 렌더링 할 수 있다.웹 앱(Web App) 또는 네이티브 앱(Native App)유지보수를 쉽게, DOM 관리성능 최적화 쉽게컴포넌트 단위로 구성하여 코드 재사용성이 높으며, ..

Template Literal1. 개념새로운 문자열 표기법backtick(`)변수 처리는 ${변수}  2. 예제// D:\React\workspace\ES601_template_literal.htmlTemplate Literal  JavaScript 연산자1. 개념React 연산자=== 같다!== 다르다 삼항 연산자[형식] 조건 ? true 일 때 : false 일 때  && ; and 연산자 아님[형식] true && 참일 때 수행하는 결과  || ; or 연산자 아님[형식] ( false, null, undefined ) 거짓일 때 수행하는 결과   2. 예제// D:\React\workspace\ES602_operator.htmlJavaScript 연산자  화살표 함수1. 개념function 키워드..