728x90 반응형 React23 React 렌더링과 최적화 + React.memo로 재사용여부 판단하기 렌더링 브라우저에서 렌더링이란 DOM 요소를 계산하고 그려내는 것을 의미한다. 1. HTML과 CSS를 통해 DOM을 만든다. 2. 계산된 DOM은 CSSOM과 결합된다. 3. 위치를 계산한다. 4. 브라우저에 그려진다. 5. 브라우저에서 제공하는 DOM API를 JS를 통해 호출하고, 브라우저에 그려진 화면을 변화시킨다. Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하고(명령형) 최적화하는 것은 애플리케이션 규모가 커질수록 관리하기 힘들다. 그래서 애플리케이션에서 보여주고 싶은 핵심 UI를 선언하기만 하면 실제로 DOM을 조작해서 UI를 그리고, 변화시키는 일은 React와 같은 라이브러리나 프레임워크가 대신해 주는 방법을 사용하게 된 것이다.(선언형) React에서 리렌더링 .. 2023. 5. 7. [react] useId Hook + 예제 useId의 탄생 배경 react에서는 컴포넌트의 상태를 변경할 때마다 렌더링이 발생하므로, ID를 생성하기 위해 일반적인 JS 변수를 사용하면 ID가 매번 재생성될 수 있습니다. 이러한 문제점을 해결하기 위해 고유한 ID를 생성할 수 있는 useId 훅이 도입되었습니다. 물론 유니크한 id가 있는 경우에는 굳이 useId를 사용할 필요는 없습니다. 유니크한 id가 없을 때만 해당 훅을 사용하면 됩니다. useId Hook useRef를 사용하여 이전 ID를 저장하고, 다음 ID를 계산하여 반환합니다. 이렇게 생성된 ID는 컴포넌트의 내부에서만 사용되며, 외부에 노출되지 않습니다. 주의할 점은 useId Hook의 반환값을 key를 위해서는 사용하지 않아야 합니다. 예제 해당 링크에서 확인해보면 더 쉽게.. 2023. 4. 27. [react] useCallback Hook + 예제 useCallback의 탄생 배경 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. 함수를 선언하는 것 자체는 메모리도, CPU도 리소스를 많이 차지하는 작업은 아니지만, 한 번 만든 함수를 필요할 때만 새로 만들고 재사용하는 것은 매우 중요합니다. 그 이유는, Virtual DOM에서 불필요한 렌더링을 줄일 수 있기 때문입니다. 예를 들어, 부모 컴포넌트가 자식 컴포넌트에게 함수를 props로 전달할 때, 자식 컴포넌트가 props가 변경될 때마다 새로운 함수를 생성하면 부모 컴포넌트가 리렌더링 됩니다. 이를 해결하기 위해 useCallback을 사용하여 자식 컴포넌트에서 메모이제이션된 함수를 사용할 수 있습니다. useCallback Hook useMemo를 기반으.. 2023. 4. 27. [react] useEffect Hook + 예제 useEffect의 탄생 배경 useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 설정할 수 있습니다. 기존 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 사용하여 컴포넌트 생명주기에 따른 작업을 처리했었습니다. 그러나 useEffect는 함수형 컴포넌트에서도 동일한 작업을 처리할 수 있게 해주는 것이 특징입니다. useEffect를 사용하면 아래와 같은 작업을 할 수 있습니다. API 호출 DOM 조작 이벤트 리스너 등록 및 해제 타이머 설정 및 해제 외부 라이브러리 로딩 useEffect Hook useEffect의 첫 번째 파라미터에는 함수, 두 번째 파라미터에는 의존성이 있는 배열을 넣.. 2023. 4. 26. [react] useReducer Hook + 예제 useReducer의 탄생 배경 상태를 관리할 때 useState를 주로 사용하는데, 이 방법말고도 useReducer를 사용할 수 있습니다. useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다는 장점이 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있습니다. useReducer Hook useReducer의 사용법은 아래와 같습니다. const [state, dispatch] = useReducer(reducer, initialState); 여기서 state는 앞으로 컴포넌트에서 사용할 state이고, dispatch는 액션을 발생시키는 함수입니다. useReducer의 첫 번째 파라미터는 .. 2023. 4. 26. 이전 1 2 3 4 5 다음 728x90 반응형
