본문 바로가기

Frontend146

React: Memo & useMemo & useCallback을 통한 성능개선 MemoReact에서는 컴포넌트의 state가 변경될 경우, 해당 컴포넌트가 리렌더링 된다. 부모 컴포넌트가 렌더링이 되면 자식 컴포넌트도 렌더링이 되면서 불필요한 렌더링이 발생한다. Memo를 사용하게 되면, 이와 같은 불필요한 렌더링을 방지하는데 도움이 되어 성능을 개선시킬 수 있다. 그러나 자주 변경되는 props에 대해 memo를 사용하게 되면 memorization( 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술 ) 과정에서 리소스가 발생하기 때문에 오히려 성능이 저하될 수 있다.const 컴포넌트명 = memo(() => { return () }); // Outer.jsximport { useState } from "react";import Inner .. 2024. 9. 6.
React : Lazy import을 통한 성능 개선 Lazy를 사용하면 웹 페이지에서 사용자가 실제로 보거나 필요로 할 때까지 리소스의 로드를 연기할 수 있다. 불필요한 네트워크 요청을 최소화하여 초기 페이지 로딩 속도를 개선할 수 있다. Lazy import { lazy, Suspense } from 'react'; const 변수명 = lazy(()=>import('파일주소'));로드되는 동안 표시할 항목 }> lazy로 로드된 컴포넌트가 로드되는 동안 보여줄  컴포넌트나 요소를 fallback 속성에 지정한다. (1) lazy와 suspense를 import한다.import { lazy, Suspense, useState} from 'react'; (2) lazy import를 통해 컴포넌트를 동적으로 가져온다.lazy import의 경우 컴포넌트.. 2024. 9. 5.
React: useReducer에 대해서 이전에 useState에 대해 작성한 적이 있다. useReducer도 useState처럼 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 상태 업데이트 훅이다. useReducer의 경우 복잡한 state 로직을 다룰 때 (state 객체 안에 또 다른 state가 있을 경우 등) 유용하게 사용된다. 공식 홈페이지에서는 가급적이면 useState를 사용을 권장하고 있다. const [state, dispatch] = useReducer(reducer, initialState, [init]);state: 현재 상태 값을 나타낸다. dispatch: state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수로, action을 인자로 받아 reducer에 전달한다.action : 사용자에 의해 수.. 2024. 9. 5.
React: React에서 Styled Component 사용하기 styled-components Age" data-og-host="styled-components.com" data-og-source-url="https://styled-components.com/" data-og-url="https://styled-components.com/" data-og-image="https://scrap.kakaocdn.net/dn/bwAXGi/hyWZd8hAoc/KPh5y8NN2JFlhXHpSD77Lk/img.png?width=652&height=652&face=0_0_652_652,https://scrap.kakaocdn.net/dn/cfqrX8/hyWVXMPDaB/cvhjWV7QkA4aDczZO4LUDK/img.png?width=652&height=652&face=0_0_.. 2024. 9. 4.
React: useEffect에 대해서 useEffect는 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있게 해주는 리액트 훅이다. useEffect가 나오기 전에는 클래스 컴포넌트에서 생성(componentDidMount), 업데이트(componentDidUpdate), 제거(componentWillUnmount) 메서드를 통해 생명주기 변화에 대응했었다. 현재는 useEffect를 통해 간편하게 사용할 수 있게 되었다.  useEffectuseEffect( () => {  생성이 되었을 때 시행되는 로직   return () => {제거 되었을 때 시행되는 로직}  }, [ 변화를 관찰할 props/state ]생성(mounting)은 컴포넌트가 처음 생성되어 DOM에 추가될 때를 의미하며, 제거(unmounting)은 컴포넌트가 DO.. 2024. 9. 3.
JavaScript : JSON(JavaScript Object Notation)에 대하여 JSONJSON은 JavaScript 객체 문법을 따르는 문자 기반의 데이터 포맷으로, JSON 표현식은 사람과 기계 모두 이해하기 쉽고 용량이 작아서 데이터를 전송 등에서 많이 사용된다. JSON의 기본적인 형태는 {key : value}이고, key값이나 value는 항상 쌍따옴표(텍스트 형식)를 이용하여 표기한다. JSON형식에는 null, number, string, array, object, boolean 을 사용할 수 있다. function, date, undefined의 경우 JSON에서 사용이 불가능 하다. {"데이터이름": "값"}JSON 값 변환JSON.stringfy(value, replacer, space)- value : javascript의 값이나 객체를 JSON문자열로 변환- .. 2024. 9. 2.

티스토리툴바