728x90 Research/React40 What is React Routing 리액트에서 라우팅을 사용하려면 보통 2가지 방식을 사용한다. 하나는 React Router 그리고 하나는 Next.js 프레임워크. 리액트를 사용하면 SPA(Single Page Application)을 만들 수 있다. 예전에는 서버와 프론트가 html, css 등 리소스를 요청 마다 주고 받았다. 정적 페이지만 주고 받으면 상관없지만, 동적으로 바꿔서 요청할 경우 서버에서 그만큼 처리를 해야 할 일이 많아지기 때문에 자원 소모가 커진다. 리액트는 클라이언트 사이드 렌더링을 하는데, 처음 html을 가져오고 그 이후 필요한 데이터는 추가로 요청을 해서 보완을 해나가는 방식으로 페이지를 구성한다. 기술적으로 하나의 페이지만 존재한다고 해서 SPA(Single Page Application)이라 부른다. 2023. 10. 27. useRef. 렌더링과 상관없이 참조 import { useCallback, useMemo, useRef, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(''); const inputEl = useRef(null); const onChange = useCallba.. 2023. 10. 25. useCallback도 최적화 전문. 함수 재생성 여부 결정 useCallback을 useMeme 대신 사용할 수 있다고 한다. 함수를 재사용해서 렌더링 최적화를 높이는 hook이라 한다. import { useCallback, useMemo, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useSta.. 2023. 10. 25. useMemo는 불필요한 연산을 줄여준다 import { useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(''); const onChange = (e) => { setNumber(e.target.value); }; const onInsert = (e) => { cons.. 2023. 10. 25. 이전 1 2 3 4 5 6 ··· 10 다음 728x90
