프론트엔드/React8 React v18 - 2 [ React DOM Client ] react-dom/client에 새로운 API가 추가되었음 ▶ createRoot(domNode, options?) createRoot는 브라우저 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성할 수 있음 'ReactDOM.render' 대신 사용하며, 리액트 18의 새로운 기능은 이것없이 동작하지 않음 import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); root.render(); 리액트는 domNode를 위해서 root를 만들것이고, 그 안에 있는 DOM을 관리 root를 만.. 2024. 2. 24. React v18 - 1 [ React ] ▶useId const id = useId() usdId는 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅 이는 주로 고유한 'id'가 필요한 접근성 API와 사용되는 컴포넌트에 유용할 것으로 기대됨 고유 ID를 생성하려면 구성 요소의 최상위 수준에서 호출해야함 굳이 전역 변수를 증가시키는 것보다 useId를 권장하는 이유는 클라이언트 구성 요소가 hydration(수화)되는 순서가 서버 HTML이 생성된 순서와 일치하지 않을 수 있으므로 증가하는 카운터로 이를 보장하는 것은 매우 어려움 useId를 호출하면 하이드레이션이 작동하고 출력이 서버와 클라이언트 간에 일치하는지 확인할 수 있음 import { useId } fro.. 2024. 2. 16. Context API 개발을 하다보면 전역상태로 관리할 상태가 많지 않을때 전역상태라이브러리를 쓰는 것보다는 ContextApi를 사용하는 것이 낫지 않을까라는 생각이 들기에 이번에 ContextApi를 파보기로 함 [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할수 있게 해주는 기능 주로 전역적(global)으로 필요한 값을 다룰 때 사용하며 꼭 전역적일 필요는 없음 따라서 리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이라고 접근하는 것이 좋음 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야할 경우 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 해 불편하고 가독성이 떨어지고 비효율적이며 실수할 가능성이 높아짐(Pr.. 2024. 1. 1. 라이프사이클(Life Cycle) [ 라이프 사이클(Life Cycle) ] 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 그러다보니 각각의 컴포넌트에는 라이프사이클 즉 컴포넌트의 수명 주기가 존재함 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝이 남 라이프 사이클을 다루는 것은 컴포넌트가 생성, 업데이트, 제거의 일련의 프로세스를 프로그래머가 통제하는 것을 뜻함 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 이런 부분들을 알아야 하는 것 라이프 사이클을 이해하게 되면 왜 그동안 리액트에 render 메서드를 작성만 했는데도 브라우저에게 어떻게 HTML을 만들어 주었는지 알 수 있게 됨 생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통.. 2023. 12. 15. useMemo & useCallback 메모이제이션(Memoization) 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 프로그래밍 기술 즉 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있음 [ useMemo ] 메모이제이션된 값을 반환하는 함수 리렌더링이 발생할 경우 의존성 배열에 지정된 deps가 변할때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게됨 useMemo(() => fn, [deps]) 의존성 배열에 지정된 deps로 지정된 값이 변하게 되면 () => fn함수를 실행하고 그 함수의 반.. 2023. 12. 7. React 렌더링 [ 렌더링 ] 현재 props 및 상태를 기반으로 리액트가 컴포넌트에게 UI 영역이 어떻게 보이길 원하는지 설명을 요청하는 프로세스 ▶ 렌더링 프로세스 개요 리액트는 컴포넌트 트리의 루트에서 시작해 업데이트가 필요하다가 표시된 모든 컴포넌트를 찾기 위해 아래로 순회함 플래그가 지정된 각 컴포넌트에 대해 함수 컴포넌트의 경우 FunctionComponent(props)를 호출하고 클래스 컴포넌트의 경우 classComponentInstance.render()를 호출하고 렌더 패스의 다음 단계를 위해 렌더 출력으로 저장함 컴포넌트 렌더 출력은 일반적으로 JSX 구문으로 작성되며 JS가 컴파일되고 배포를 준비될때 React.createElement() 호출로 변환됨. creatElement는 의도된 UI의 구.. 2023. 11. 21. 리액트 디자인 패턴(팩토리 패턴 - Factory Pattern) 팩토리 패턴이 나오게 된 계기 객체 지향 디자인 패턴의 기본 원칙은 확장은 열려 있어야 하지만 수정은 닫혀 있어야 한다는 것 코드를 수정하지 않아도 모듈의 기능을 확장하거나 변경할 수 있어야 함 그렇기 때문에 수정이 일어날 가능성이 큰 부분과 그렇지 않은 부분을 분리하는 것이 좋음 객체는 속성과 함수가 변경 또는 추가 될 가능성이 높기 때문에 객체의 생성을 담당하는 코드는 변경의 가능성이 높음 따라서 클래스를 한 곳에서 관리하여 결합도를 줄이기 위하여 팩토리 패턴이 나타나게 된 것 결합도(의존성)이란? 결합도는 한 클래스의 변경점이 얼마나 다른 클래스에 영향을 주는가를 의미함 팩토리 패턴 부모 클래스에서 객체를 생성할 수 있는 인터페이스를 제공하지만 자식 클래스들이 생성될 객체들의 유형을 변경할수 있도록.. 2023. 9. 13. 리액트 렌더링 최적화 [ 미리 알고 있어야 하는 개념들 ] ▶ 브라우저 렌더링 Html 파싱을 해서 DOM을 만들고 CSS를 파싱 해서 CSSOM을 만듦 DOM과 CSSOM을 활용해서 렌더트리를 만듦 그리고 layout과 repaint 과정을 거쳐 화면에 웹사이트가 렌더링 됨 즉 사용자가 웹 사이트를 볼 수 있게 되는 것 ▶ 리액트에서의 렌더링 리액트가 함수를 호출하는 것. 리액트 렌더링은 render phase와 commit phase로 구성되어 있음 - render phase render phase에서는 컴포넌트를 호출하여 리액트 엘리먼트를 반환하고 새로운 virtual DOM을 생성해 줌 만약 이번이 첫 번째 렌더링이 아니라면 재조정과정을 거친 후 Real DOM에 변경이 필요한 목록들을 체크함 재조정이란 간단히 말해서.. 2023. 7. 1. 이전 1 다음
