react

# 커스텀 훅이란 ? 반복할 것 같은 로직을 리액트 훅처럼 내가 만들어서 저장해 사용할 수 있게 만든 것이다. # 사용 이유 스크롤 이벤트나 리사이즈 이벤트 관련 함수를 자주 사용해서 쓰로틀링 처리가 필요해서 커스텀 훅으로 만들어서 사용해보려고한다. # 규칙 1. 최상위(at the Top Level)에서만 Hook을 호출해야 한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않아야 한다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 이러한 점은 React가 useState와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해준다. 2. 오직 React 함수 내에서 Hook을 호출해야 한..

https://jjaong34.tistory.com/77 [React] 성능 최적화 memo# memo ? 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐) 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림 자바스크립트 엔진의 Garbage Collection에서 제외jjaong34.tistory.com지난시간에 이어서 메모이제이션에 대해 좀 더 알아보려고 합니다. # lodash만약 부모컴포넌트에 참조형 변수가 있으면 부모컴포넌트가 재랜더링 될때마다 참조형 변수가 재선언되면서 자식컴포넌트에 전달된 변수가 있기 때문에 계속해서 재호출 됩니다. lodash로 참조형 변수값을 비교해 재호출을 방지할 수 있습니다. 설치)npm i lodash 사용) app.jsimport {..

# memo ? 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐) 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림 자바스크립트 엔진의 Garbage Collection에서 제외됨 (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화) # 언제 사용할까? 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 요소가 없음에도 불구하고 무조건 같이 재호출됨 # 기본 구조 export default memo(컴포넌트) 컴포넌트를 내보낼때 memo로 감싸준다. # 예시 app.js 와 그 자식 컴포넌트로 예시를 들어보겠습니다 - app.js import { useState } from 'react'; import Child from './Child'; function App() {..

# useState [state가 담김 그릇, 해당 State값을 변경해주는 전용함수] = useState(초기값) 컴포넌트에서 State값을 변경하면 첫 번째 렌더링 사이클에서는 변경된 State값 활용불가 State값이 변경되면 컴포넌트가 무조건 재호출되고 두 번째 렌더링 사이클에서 변경된 State값을 활용가능 얕은 복사시 원본도 훼손되면서 변경 비교대상이 없어지면서 재랜더링 불가 (state는 원본과 비교하면서 동작) 복사시 스프레드 연산자 사용 (deep copy) 우선 import 를 해야한다 import { useState } from 'react'; state로 사용할 변수명을 지정한다 const [state, setState] = useState(초기값); 예시) import { useS..

리액트는 SPA로 페이지가 이동하는게 아닌 교체하는 방식으로 화면이 바뀐다. html에서는 a태그를 이용해 화면을 이동하지만 리액트에서는 react-router-dom이라는 패키지를 이용해 라우트경로를 설정한다. 일단 react-router-dom을 설치해야한다. npm i react-router-dom 설치했으면 # HashRouter index.js 파일로 가서 react-router-dom에 HashRouter로 App 컴포넌트를 감싸준다. - index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { HashRouter } from 'react-router-dom'; Re..

일단 react를 설치하기 위해선 기본적으로 node가 필요하니 node 부터 설치해야 한다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 18버전 이상으로 설치 실제로 리액트는 UI를 구성할 때 필요, 최신의 자바스크립트 문법을 모든 브라우저가 읽고 해석할 수 있는 과거의 문법으로 변환시켜주는 Babel, 작성한 자바스크립트 파일을 분석하여 분할하고 합쳐주는 역할을 하는 WebPack 또한 필요하다. 최신버전 부터는 babel과 webpack이 같이 설치되니 신경쓸 필요는 없고 알고있으면 된다. cmd 열어서 전역으로 리액트를 설치해 준다 명령어..