IT/react32 [React] Compound Pattern 개념 Context API 이용하여 여러 종류의 컴포넌트가 하나의 로직을 공유할 수 있게 하는 방법 렌더링 IoC를 실현 가능 HTML 태그인 , 도 compound pattern에 해당 사례 컴포넌트 내용은 같지만, 구성 순서를 다르게 하고 싶을 때 - positionOrder같은 prop을 추가하고 렌더링 방식을 바꾸는 방식 - Render Prop 패턴을 이용하는 방식 나중에 유사한 변경사항이 발생한다면, 위의 방식에서 로직이 추가되어 복잡도가 높아진다. 합성 컴포넌트로 구성한다면, 기존 로직을 그대로 사용할 수 있으면서 각각 구성요소별로 별개의 컴포넌트로 분리할 수 있다. 추후 UI 변경에 대해 유연하게 대응 export const Input: React.FC = function ({ value,.. 2024. 2. 28. [React] Render Prop Pattern 개념 컴포넌트가 렌더링 함수를 프로퍼티로 전달받아 사용하는 방법 특징 동일한 렌더링 방식이 연속적으로 사용되는 컴포넌트에서 아주 유용 (리스트, 테이블 형태) 복잡한 조건의 렌더링 방식을 표현하기에 제한 render 함수가 너무 복잡해지거나 render기능을 하는 프로퍼티가 많아질 수 있음 HTML 삽입 미리보기할 수 없는 소스 상태를 부모 컴포넌트로 옮겼을 때 Render Props Pattern을 고민해보자 상태변경은 모든 자식 컴포넌트의 리렌더링을 유발하고, 이런 상황이 쌓이면 앱의 전체적인 성능을 떨어트릴 수 있다. function Input({ value, handleChange }) { return handleChange(e.target.value)} /> } export default fun.. 2024. 2. 26. [React] Suspense와 선언적으로 Data fetching처리 개요 react-query와 suspense를 이용하여 비동기 작업 처리를 어떻게 하는지 알아본다 렌더링 시 비동기 작업 처리하는 방법 fetch-on-redner 렌더링 후 useEffect로 비동기 처리 > leads to 'waterfall' 비동기 작업을 하는 이유는 동시성을 통하여 효율성을 얻는 것인데, 동기화 처리를 하다보면 동시성을 제대로 활용할 수 없어 효율성이 떨어짐 fetch-then-render 화면을 그리는데 필요한 데이터를 최대한 일찍 조회 후 린더링 시작 > 데이터 조회완료까지 할 수 있는게 없음 동시성을 보장하기 위해 비동기 작업들을 한 곳에서 동시적으로 처리한다고 해도 컴포넌트들 간의 역할분담이 불명확하게 하고 높은 결합도를 만들어 진다. 코드도 깔끔하지 않고 render-a.. 2024. 2. 11. [React] children 잘 활용하기 React.Children.toArray() 특징 1 불투명 데이터 구조를 각 자식에 할당된 키가 있는 flat arrary로 반환 children을 전달하기 전에 sort 또는 slice하려는 경우 유용 function Box({ children }) { console.log(children); console.log(React.Children.toArray(children)); return children; } const fruits = [ { id: 1, name: "apple" }, { id: 2, name: "kiwi" }, ]; export default function App() { return ( banana {fruits.map(fruit => ( {fruit.name} ))} ); } 콘.. 2024. 2. 6. React - useImperativeHandle 개념 잡기 useImperativeHandle에 대해 알아보자 딱봐서는 어떤 기능을 하는지 짐작하긴 힘들다. Imperative에 대해 사전적 의미부터 살펴보자 Imperative 뜻은 '반드시 해야 하는' , '위엄 있는', '긴요한 것'으로 해석된다. 이런 뜻을 인지하면서 해당 hook이 어떤 기능을 하는지 알아보자 개념 `forwardRef`로 넘어간 ref instance를 이용하여 자식 컴포넌트 내의 기능을 부모 컴포넌트에서 직접 사용하고 싶을 때 사용하는 hook입니다. 예시 App 컴포넌트 App 컴포넌트는 부모 컴포넌트이고 MyInput 컴포넌트는 하위 컴포넌트 입니다. App 컴포넌트에서 ref값을 선언할때 어떤 기능을 담당하는지 Generic Type을 정의합니다. MyInput 컴포넌트에 ref.. 2023. 10. 12. React - Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 6. 23. 이전 1 2 3 4 5 6 다음
