Contents// React\HooksHooksuseEffect Homework// React\[Examples] Hooks// day04/src/componentsTodos.jsxTodoForm.jsxTodoList.jsxTodoItem.jsx
전체 글
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 키워드..
Contents// React\ES6\ES6 Basic비구조할당(구조분해)전개 연산자spread 연산자 // React\React 개요ReactComponentJSX 규칙리액트 프로젝트 생성vite 활용 리액트 프로젝트 생성리액트 파일Props이벤트배열과 객체 배열의 map 반복문 // React\HooksHooksuseStateReact 프로젝트 import, export 방법집에 가져갈 때 폴더의node_module 삭제 집에서 폴더 받은 후npm i