Front-end/React 썸네일형 리스트형 [React] 키워드 추천 자동완성 기능 구현 1. 구현 내용사용자가 키워드를 입력하면 해당 키워드로 시작하는 제안 키워드가 나오고, tab 키를 누르면 제안 키워드가 입력되는 기능 2. 코드 import React, { useState } from "react";import menuList from "./MenuList.js";import "./App.css";function App() { const [menuName, setMenuName] = useState(""); const [filteredMenus, setFilteredMenus] = useState([]); // 메뉴명 필터링 결과(=자동 완성 리스트) const [suggestion, setSuggestion] = useState(""); // 메뉴명 자동완성 제안 텍스트 //.. 더보기 [React] 리액트 번들러 Webpack 번들러(Bundler)는 여러 개의 파일 및 종속성을 하나의 파일로 결합하고 최적화하는 도구입니다. 리액트 프로젝트에서 번들러는 주로 JavaScript 파일들 및 다양한 리소스들을 하나의 번들로 묶어서 브라우저에서 효율적으로 로딩되도록 도와줍니다. 주요한 리액트 프로젝트에서 사용되는 번들러 중 하나는 Webpack입니다. Webpack은 모듈 번들러로서 JavaScript 파일 뿐만 아니라, CSS, 이미지, 폰트 등 다양한 유형의 파일도 처리할 수 있습니다. Webpack은 프로젝트의 각 모듈 및 종속성 간의 의존성을 해결하고, 필요한 리소스를 번들로 묶어주며, 코드를 최적화하여 성능을 향상시킬 수 있습니다. Webpack은 일반적으로 다음과 같은 작업을 수행합니다: 번들링 (Bundling): 여러.. 더보기 [React] 리액트 프로젝트 생성하기 create react-app yarn$ yarn create react-app {프로젝트명} npm$ npm create react-app {프로젝트명} npxnpx는 npm 패키지를 실행하거나, 로컬에 설치하지 않고 일회성으로 실행할 때 사용하는 도구입니다. npx를 사용하면 매번 최신 버전의 패키지를 다운로드하여 사용할 수 있습니다.$ npx create react-app {프로젝트명} 발생한 에러 npm create react-app react_templatenpx: installed 64 in 2.899sYou are running Node 12.22.12.Create React App requires Node 14 or higher. Please update your version of Node. 원인현재 사용 중인 .. 더보기 [React] 훅(Hook) - useNavigate - 페이지 이동을 도와줌 - 보통 변수에 저장해서 사용 import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; function App() { let navigate = useNavigate(); return( { navigate('/detail')}}>Detail { navigate(-1)}}>뒤로 한 페이지 이동 { navigate(1)}}>앞으로 한 페이지 이동 ) } 더보기 [React] 훅(Hook) - useRef 1. 정의 - 레퍼런스(Reference)를 사용하기 위한 훅 리액트의 레퍼런스 특정 컴포넌트에 접근할 수 있는 객체 - useRef()훅은 레퍼런스 객체(ref object)를 반환 - 레퍼런스 객체에는 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미함 - 반환된 레퍼런스 객체넌 컴포넌트의 라이프타임(lifetime) 전체에 걸쳐서 유지됨(컴포넌트 마운트 해제 전까지 유지) - 변경 가능한 .current라는 속성을 가진 하나의 상자라고 생각하면됨 2. 사용방법 - 파라미터로 들어온 초기값(initail value)으로 초기화된 레퍼런스 객체를 반환 const refContainer = useRef(초기값); 더보기 [React] 훅(Hook) - useCallback 1. 정의 - useMemo() 훅과 유사한 역할, 차이점은 값이 아닌 함수를 반환한다는 것 - 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로 함수가 다시 정의되지 않는 경우에 자식 컴포넌트도 재렌더링이 일어나지 않음 2. 사용 방법 - 함수와 의존성 배열을 파라미터로 받음 - 파라미터로 받는 함수를 콜백이라고 부름 - 의존성 배열에 있는 변수 중 하나라도 변경되면 Memoized 콜백 함수 반환 useCallback(function, dependencies) const memoizedCallback = useCallbck( () => { doSomething(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 메모이제이션(Memoization) 비용이 높은(연산.. 더보기 [React] 훅(Hook) - useMemo 1. 정의 - 컴포넌트가 재렌더링 되면 그 속에 자식 컴포넌트도 항상 함께 재렌더링 됨 -> 자식컴포넌트가 동작이 오래걸리는 무거운 컴포넌트인 경우 부모 컴포넌트를 렌더링 할 때 마다 속도 저하가 발생할 수 있음! 이런 상황에 자식 컴포넌트를 memo로 감싸 놓으면 됨! -> 재렌더링을 막기위한 훅 - 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있는 경우 useMemo에 담아서 사용 할 수 있음 -> 예를 들어 반복문을 10억번 돌려야 하는 경우, 그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됨 - useEffect처럼 dependency도 넣을 수 있기 때문에 특정 state, props가 변할 때만 실행 가능 -> 따라서 useMemo훅에 의존성 배열을 넣지 않는 경우 렌더링이.. 더보기 [React] 훅(Hook) - useEffect 1. 정의 - useState()와 더불어 가장 많이 사용되는 훅 - 클래스 컴포넌트에서 제공하는 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()를 통합한 기능을 제공 - 리액트의 함수 컴포넌트에서 사이드 이펙트(Side Effect)를 수행하기 위한 훅 사이드 이펙트(Side Effect) - 사전적으로는 부작용이라는 뜻 - 컴퓨터 프로그래밍에서는 개발자가 의도치 않은 코드가 실행되면서 버그가 나타나면 사이드 이펙트가 발생했다고 함 - 리액트에서의 사이드 이펙트는 효과 혹은 영향을 뜻하는 이펙트(Effect)의 의미에 가까움 (서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미, 작업이 다른 컴포넌트에 영.. 더보기 이전 1 2 3 4 다음
