IT/react33 [React] Controlled Props Pattern 개념 기본적인 IoC 제어 컴포넌트 패턴 컴포넌트 내부에 정의된 state 값을 변경하는 로직을 사용하지 않고, prop을 통해 외부에서 들어온 상태 값과 콜백 함수를 사용함으로써 외부에서 컴포넌틔 상태를 컨트롤할 수 있게 한다. 특징 단순한 상태 값을 가지는 컴포넌트에서는 아주 유용. 상태 값이 여러 개고 해당 값을 컨트롤 하기 위한 콜백 함수가 많아지면, 오히려 정의해야 하는 함수와 컴포넌트의 프로퍼티가 많아져서 사용성에 문제가 발생 할 수 있음 HTML 삽입 미리보기할 수 없는 소스 2024. 3. 1. [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. 이전 1 2 3 4 5 6 다음
