nextjs 설치 1. 설치 npx create-next-app [프로젝트명] 2. next js vs react - react 에서는 라우팅을 설정할 때, 직접 app.js 에서 라우팅을 설정해야되는 번거로움을 가지고 있었다. - SSR 대응이 안됨. ----------------- - nextjs 에서는 라우팅이 폴더별로 잡히기 때문에 라우터 관리가 용이함. - SSR 이 가능하기 때문에 빠른 로딩 대응 가능. 프론트엔드/react 2023.03.05
useCallback 부모 컴포넌트에서 자식컴포넌트에 props 로 내려준다면 함수를 포함하고 있는 컴포넌트가 rerendering 될 때마다 자식 컴포넌트도 함수가 새롭게 만들어져서 계속해서 re-rendering 하게 된다. 이렇게 리렌더링 현상을 없애주기 위해 useCallback 함수를 사용한다. const handleClick = useCallback((id) => { let newTodoData = todaData.filter((data)=> data.id !== id); setTodoData(newTodoData); localStorage.setItem("할일앱", JSON.stringify(newTodoData)); }, [todoData] ) 위의 코드에서 useCallback으로 인해 todoData가 변하.. 프론트엔드/react 2022.10.23
react 18 version 기본 설치 1. react 설치 $ npx create-react-app 프로젝트명 ex) npx create-react-app start-react 2. prop-types 모듈 설치 $ npm i prop-types 3. routes , layouts, components, auth 폴더 생성 $ mkdir routes $ mkdir pages $ mkdir layouts $ mkdir auth 프론트엔드/react 2022.09.26