본문 바로가기

react

(7)
React 성능 개선 (개발자 도구 & lazy import, memo & useMemo, useTransition & useDeferredValue) React 개발자 도구 & lazy import 개발자 도구https://chromewebstore.google.com/ - react delveloper tools 검색 - 다운로드 * react로 만들어진 페이지만 확인 가능F12 - Components = Element보다 좀더 편하게 확인 가능 F12 - Profiler = 성능저하되는 컴포넌트 범인 찾기 lazy importSingle Page Application 특징 : js파일 하나에 모든 코드를 다 쑤셔 넣는다. (사이즈가 크다)따라서, 해당 페이지를 로딩할 때 필요하지 않는 import부분이 있으면, 그 부분은 lazy import()로 묶어준다 로딩 중일 때, 흰색 화면이 뜨기 때문에 그것을 방지하기 위해 Suspense를 import..
React if문 작성 패턴, localStorage, react-query, PWA(앱 실행), async React if문 작성 패턴1. 컴포넌트 안에서 쓰는 if/else2. JSX안에서 쓰는 삼항연산자 3. && 연산자로 if 역할 대신하기4. switch / case 조건문5. object/array 자료형 응용                        React localStorageLocalStorage : 브라우저에서 제공하는 데이터 저장소 (키, 밸류 형식)* 브라우저를 청소하면 삭제됨 * 새로고침하면 state가 초기값으로 돌아간다따라서, localStorage에 저장한다(반영구적 저장가능) localStorage 확인법 : F12 - application - Local StoragelocalStorage 데이터 저장법 : localStorage.setItem('이름', '값')localSto..
React Styled-component, Lifecycle & useEffect, ajax, 동적 UI, transition) React Styled-component * Styled-component를 사용하면 css파일이 없어도 된다Styled-component 설치 : npm install styled-componentsimport styled from 'styled-components' 사용법 : let 변수명 = styled.button `내용` = 버튼을 만든것이고, 백틱으로 내용 설정끌어와서 쓰려면 으로 사용 장점 : 다른 js파일에 관섭을 하지 않는다. 페이지 로딩 시간 단축 해당하는것도 props를 이용해서 특정 부분만 변경 가능 단점 : js파일이 복잡해짐.                             React Lifecycle & useEffectLifecycle : 컴포넌트의 주기(장착, 업데이트, ..
React Bootstrap, 이미지 및 public폴더 사용, import & export, 라우터 React Bootstrap 설치Bootstrap 라이브러리 설치 : react bootstrap 검색 (https://react-bootstrap.netlify.app/) - Get Started - npm ~~ 복사- terminal창 붙여넣기  CSS 부분 복사 - App.js 상단에 붙여넣기 또는 이 부분 복사 - public/index.html - head태그 안쪽에 붙여넣기                          React Bootstrap 사용https://react-bootstrap.netlify.app/ - GetStarted - (ctrl + k)로 검색창 열기 - 검색필요한 것(button) 검색 - 복사 - App.js 붙여넣기  * 가져온 컴포넌트는 import 해줘야 한다*..
React input, class React input종류 : text, range, checkbox 등등e.target.value : 입력한 값을 가져옴e.stopPropagation() : 상위 html로 퍼지는 이벤트버블링을 막고 싶을때 사용splice() : 배열에서 특정 인덱스 삭제/* eslint-disable */import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { let [글제목, 글제목변경] =useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']) let [따봉, 따봉변경] = useState([0, 0, 0]); let [modal, setModal] = useState(..
React 컴포넌트, 동적 UI, 박복문(map), props(state 자식과 부모) React 컴포넌트 컴포넌트 만드는법 : function을 만듦 - return() 안에 html 담기 - 으로 사용* 함수명은 첫글자 대문자* 의미없는 대신 사용 가능 * 어떤걸 컴포넌트로 만들면 좋은지 : 반복적인 것, 큰 페이지들, 자주 변경되는 것* 컴포넌트 단점 : state를 가져다쓸 때 문제가 생긴다                        React 동적 UI만드는 방법 : 미리 디자인 완성 - 현재 상태를 state로 저장 - state에따라 어떻게 보일지 작성* if문 대신 삼항연산자 사용(? : )/* eslint-disable */import logo from './logo.svg';import './App.css';import { useState } from 'react';fun..
React 개발 환경 세팅 및 실행, 레이아웃(JSX), state React 개발환경 세팅nodejs 검색 - 왼쪽 설치 vscode 검색 - 설치 작업할 폴더 생성 - shift 우클릭 - powershell창 열기 - npx create-react-app 프로젝트명 * 오류발생시 : 윈도우 검색 - powershell - 우클릭 - 관리자 권한으로 실행 - Set-ExecutionPolicy Unrestricted 입력vscode - 해당 폴더 열기 node_modules : 라이브러리 모아놓은 곳public : static 파일 모아놓은 곳(img)src : 소스코드 보관함package.json : 프로젝트 정보                     React 실행 실행 : terminal - new terminal - npm start * App.js : 메인 페..