728x90 반응형 SMALL 기술 개발/React16 React Hooks (useMemo) useMemo는 메모이제이션된 값을 반환한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 첫번째 인수에는 어떻게 연산할지 정의하는 생성(create)함수, 두번째 인수에는 의존성 값의 배열을.. 2023. 1. 6. React Hooks (useReducer) useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Redux를 사용해봤다면 알기 쉽다. const [state, dispatch] = useReducer(reducer, initialArg); (state, action) => newState의 형태로 reducer를 받고, dispatch 메서드와 짝의 형태로 현재 state를 반환한다. 다수의 하윗값을 포함하는 복잡한 로직을 만들거나 다음 state가 이전 state에 의존적인 경우, 보통 useState보다 useReducer를 선호한다. 또한 useReducer는 콜백 대신 dispatch를 전달할 수 있기 때문에, 자세한 업데이트를 트리거하는 컴포넌.. 2023. 1. 5. 컴포넌트의 라이프사이클 메서드 리액트 컴포넌트에는 라이프사이클(Lifecycle)이 있다. 클래스형 컴포넌트에서만 라이프사이클 메서드를 사용할 수 있다. 라이프 사이클은 마운트, 업데이트, 언마운트 세 가지로 나눈다. 마운트(Mounting) DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트(Updating) 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 이 네가지 경우에 컴포넌트를 업데이트한다. 언마운트(Unmounting) 컴포넌트를 DOM에서 제거하는 것 라이프사이클 메서드 마운트 - constructor: 컴포넌트 생성자 메서드, 초기 state 정할 수 있음 - getDerivedStateFromProps: pr.. 2023. 1. 4. 상태관리 라이브러리 비교(Redux/MobX/Recoil) 리액트는 뷰나 앵귤러와 비교했을 때 가장 큰 차이점이 단방향 바인딩이다. 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있으며, 자식 컴포넌트에서 부모 컴포넌트로 props를 직접 전달할 수 없다는 것이다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 하는데, 이것이 반복되면 Props Drilling이 발생하게 되며 프로젝트 규모가 커질수록 props의 depth가 증가하게 된다. 이렇게 되면, 불필요한 리렌더링이 발생하는 등 비효율적이다. 따라서, 리액트 props로만 state 관리를 하지 않고, 상태관리 라이브러리도 사용할 필요가 있다. 대표적인 상태관리 라이브러리 - Redux, MobX, Recoil 1. Red.. 2022. 12. 16. React에서 상태관리를 왜 할까? 상태(state)란? 상태관리를 왜 하는지 알아보기전, 상태가 무엇인지 알고 있어야 한다. 오늘날 웹 어플리케이션에서 상태는 동적이면서, 렌더링에 영향을 주는 값이라고 할 수 있다. 리액트 공식 문서 참고 Plain Javascript Object hold information influences the output of render 리액트는 그 자체 만으로도 상태를 관리할 수 있는 수단을 제공한다. 예를 들어서, useState, useReducer, Context API 등 그래서 서드 파티 라이브러리(제 3자 라이브러리)를 도입해서 상태를 관리할 때는, 라이브러리가 쓰여야하는 명확한 이유와 그 쓰임새에 대해 생각해보아야한다. 상태관리를 왜 할까? 리액트는 가상돔을 이용한다. 컴포넌트가 변화할 때 리.. 2022. 10. 18. 리액트를 사용하는 이유 1. 컴포넌트 기반의 화면구성 리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나눌 수 있으며 독립적으로 관리할 수 있습니다. 대규모 웹 애플리케이션에서 컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게 해주어서 코드 재사용성을 높여줍니다. 또 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있습니다. 2. Virtual DOM으로 인한 충분히 빠른 속도 Virtual DOM은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 이 접근방식이 React의 선언적 API를 가능하게 합니.. 2022. 10. 13. 이전 1 2 3 다음 728x90 반응형 LIST
