728x90 300x250 SMALL 2024/1125 메모이제이션이란? 메모이제이션(memoization)은 특정 연산의 결과를 캐시에 저장해두고나중에 같은 입력이 들어오면 다시 계산하지 않고 캐시된 결과를 반환하는 최적화 기법이다.쉽게 말해, 같은 연산을 여러 번 하지 않도록 결과를 저장해 두고 재사용하는 것이다. 메모이제이션의 목적불필요한 계산 방지 : 같은 입력값에 대해 중복 계산을 피한다.성능 개선 : 특히 연산 비용이 높은 함수(예: 재귀, 복잡한 수학적 계산)에서 효율적이다.작동 원리함수가 실행되면, 입력값과 결과값을 키-값 쌍으로 저장한다.동일한 입력값으로 함수가 호출되면, 저장된 결과를 반환한다.(실제로 계산을 다시 하지 않는다.)예제 : 기본 메모이제이션다음은 피보나치 수를 계산하는 코드이다.메모이제이션이 없는 경우function fibonacci(n) { .. 2024. 11. 30. useMemo : 리액트 훅 사용법 useMemo훅은 React에서 컴포넌트의 성능을 최적화하기 위해 사용되는 훅이다.특정 연산의 결과를 메모이제이션하여 불필요한 재계산을 방지한다. 의존성배열에 변수가 변했을 경우에만 create함수를 호출해서 결과값을 반환하고 그렇지 않은 경우에는 기존 결과값을 그대로 반환한다.주로 연산량이 높은 계산이나 데이터 변화로직에서 유용하게 사용되며 빠른 렌더링 속도를 얻을 수 있다. useMemo 사용법const memoizedValue = useMemo( () => { //연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2]); useMemo는 두 가지 매개변수를 받는다.1. 첫 번째 매개변.. 2024. 11. 29. useEffect : 리액트 훅 사용법 useEffect는 함수형 컴포넌트에서 side effect(부수 효과)를 처리하기 위한 React 훅이다.리액트에서의 사이드 이펙트란 컴포넌트의 렌더링 외부에서 발생하는 작업들을 의미한다.예를 들면 서버에서 데이터 가져오기, 구독 설정, 타이머 설정, 수동으로 DOM 조작하기 등이 있다.이 작업들은 다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료 될 수 없다.렌더링이 끝난 이후 실행되어야 하는 작업이다.클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 리사이프사이클 메서드를 사용해서 처리 했지만 함수형 컴포넌트에서는 useEffect()훅만으로 동일한 기능을 처리할 수 있다. useEffect의 기본.. 2024. 11. 28. 클래스 컴포넌트와 함수형 컴포넌트에서의 useState() 비교 클래스 컴포넌트에서 setSTate()함수를 호출해서 state가 업데이트되고 컴포넌트가 재렌더링 되는 과정은 동일하지만 업데이트 방식의 차이가 존재한다. 클래스컴포넌트에서의 setState()클래스형 컴포넌트에서는 상태를 하나의 객체로 묶어서 관리한다.setState()메서드를 호출할 때, 객체를 전달해서 여러 개의 상태 값을 동시에 업데이트 할 수있다.예를 들어 count와 name을 동시에 업데이트할 때는 다음과 같이 할 수 있다.class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, name: 'John', }; } increme.. 2024. 11. 27. 이전 1 2 3 4 ··· 7 다음 728x90 반응형 LIST