React/기능12 [React] 성능 측정하기 React 성능을 측정할 수 있는 Profiler라는 도구가 있다. 사용하기 위해선 크롬에서는 React Developer Tools라는 익스텐션을 설치해야 한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 설치하고 React 프로젝트를 실행해서 개발자 도구를 들어가면 다음과 같이 Profiler가 있다. Pro.. 2022. 10. 28. [React] useCallback 그리고 React.memo React에서 UI의 성능을 증가시키기 위해서 React.memo를 제공한다. React.memo는 렌더링의 결과를 메모이징해서 새로운 렌더링이 감지될 때, props가 같다면 메모이징한 결과를 재사용한다. const compoenent = React.memo(({title, content}) => { return ( {title} {content} ) }) 다음과 같은 컴포넌트가 있다면, React.memo는 title과 content가 변경되지 않는다면 메모이징된 결과를 다시 사용한다. const ParentsComponent = () => { return anyfuntion()}/> } 부모 컴포넌트에서 자식 컴포넌트에게 상태값만 넘겨주는 것이 아닌, 아무개 함수를 넘겨주는 경우도 있을 것이다. 이.. 2022. 10. 27. [React] useRef 그리고 useState 일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필요없는 경우에도 useState를 사용하면 상태가 변경되므로 리렌더링이 발생한다. const Component = () => { const [state, setState] = useState(""); return ( setState(e.currentTaget.value)}/> ) } input에 값을 입력하면 입력할 때마다 리렌더링이 발생한다. 하지만 입력된 값이 변경될 때마다 굳이 화면을 리렌더링해야할 상황인가? 생각해보면 아니다. 만약에 입력한 값이 어디서 동시에 보여져야 한다면 리렌더링이 발생해서 입력한 .. 2022. 10. 26. [React] Map을 State로 사용하기 React를 사용할 때 State로 Map을 사용하는 경우가 있다. 이때 어떤 방식으로 추가, 삭제, 등을 할 것인가? const [state, setState] = React.useState(new Map()); // 추가 const add = (key, value) => { setState((prev) => new Map([...prev, [key, value]])); }; // 없는 경우에만 추가 const upsert = (key, value) => { setState((prev) => new Map(prev).set(key, value)); } // 삭제 const delete = (key) => { setState((prev) => { const newState = new Map(prev); .. 2022. 10. 25. [React] 컴포넌트 합성 React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props .. 2022. 10. 21. [React] react-router-dom 사용하기 리액트의 라운터 사용자가 주소를 입력하면 그것을 감지해서 화면에 올바른 페이지를 제공한다. BrowserRouter와 HashRouter가 존재한다. - BrowaerRouter : 우리가 흔히 알고있는 주소 체계이며, HTML5를 지원하는 브라우저의 주소를 감지 - HashRouter : 주소에 #이 붙어 있으며, 이 해시 주소를 감지한다. 설치 yarn add react-router-dom 가장 많이 사용하는 react-router-dom이다. 사용하기 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Header from "@/components/layout/header"; import Home from "./home";.. 2022. 10. 5. [React] useLayoutEffect useEffect랑 useLayoutEffect 둘 중 useLayoutEffect 먼저 화면에 랜더링 된다. useLayoutEffect?? useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 랜더링 된 후 실행이 되지만, useLayoutEffect는 화면의 리사이징, 즉 레이아웃의 변환을 감지하는 Effect이다. 정리하자면 useEffect -> 화면이 완전히 바뀌고 난 후 발생 useLayoutEffect -> 화면이 바뀌기 전 발생 2022. 2. 8. [React] useRef Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택해야 한다. 리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지, 또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다. 그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다. 이럴 때, 리액트에서는 ref라는 것을 사용한다. .. 2022. 2. 8. [React] useEffect useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능.. 2022. 2. 8. 이전 1 2 다음 반응형
