Ellen's Web Note

import { createElement } from "react"; function Container({ children }: { children: JSX.Element | JSX.Element[] }) { const childArray = Array.isArray(children) ? children : [children]; return ( {childArray.map((child, idx) => { return createElement(child.type, { ...{ ...child.props, idx: idx, value: `value${idx}` } }); })} ); } 예시 : 의 자식으로 여러개의 노드를 사용하는 경우 JSX.Element[] 배열을 통해 선언되어 있는 모든 자식 노드를 ..

yarn add redux react-redux 리덕스 프로젝트 패턴 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하여 사용. - 코드의 재사용성이 높아지고 - UI 또는 이벤트에 따라 특정 컴포넌트에 집중할 수 있다. ● 컨테이너 컴포넌트 (container/CounterContainer.jsx) 리덕스에서 값을 받아오거나 액션을 처리하는 컴포넌트 import React, { useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import Counter from "../compoents/counter/Counter"; import { decrease, increase, setText } from "....

리덕스 개념 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 여러 컴포넌트에서 동일한 상태를 참조할 수 있도록 하는 라이브러리. 기존의 데이터 처리는 부모 컴포넌트에서 업데이트하면서 상태를 관리하고 자식 컴포넌트는 부모 컴포넌트의 데이터를 참조(props)하기 때문에 자식 컴포넌트의 노드가 깊어지면 데이터를 끌고 가야하는 불편함이 있다. 또, 부모 컴포넌트끼리 값을 참조해야 하는 경우 그 위에 또다른 상위 컴포넌트를 생성하여 같은 데이터를 참조할 수 있도록 유도해야 한다. 리덕스를 사용하면, 데이터를 가진 파일을 분리하고 import해서 사용하기 때문에 어느 위치의 컴포넌트라도 동일한 상태의 데이터를 참조할 수 있게 된다. 리덕스 키워드 개념 액션(Action) 데이터에 업데이트가 필요한 경..

axios 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트. Http요청을 Promise 기반으로 처리 yarn add axios axios GET 파라미터로 전달된 주소에 GET요청. .then을 사용하거나 async/await를 통해 리턴받은 데이터 확인 const getData = () => { axios.get(url) .then(response =>{ return response; }) } const getData = async () => { return await axios.get(url) } axios POST 첫번째 파라미터에 URL 주소, 두번쨰 파라미터에 request data를 넣고 api 호출 const postData = async (postParam) => { retur..

react에서 List 무한스크롤을 처리하는데, reacvt-virtualized를 사용하면 리스트에 사용되는 컴포넌트의 렌더링 관리가 가능하다. 기능 설명은 아래에. https://ellen92.tistory.com/56 [React] 컴포넌트 성능 최적화 2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { console.log(clientHeight); console.log(clientWidth); return( )}} ) 특정 이벤트에 스크롤을 적용하려면, 스크롤이 움직이는 동안 scrollHeig..

SPA (Single Page Application) 한 개의 페이지로 이루어진 애플리케이션으로 이벤트에 따라 동적으로 화면을 바꿔가며 최소한의 요소만 변경이 일어난다. 기존의 웹 브라우저는 화면 전환이 일어날 때마다 HTML을 서버에 새로 요청하면서 불필요한 로딩이 있었던 반면에 SPA는 애플리케이션을 브라우저에 불러와 필요한 부분의 렌더링을 브라우저가 담당하여 서버에 부하를 줄여준다. 라우팅 - 다른 주소에 다른 화면을 보여주는 것. - 서버에서 사용자에게 제공하는 페이지는 한종류이지만, 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. yarn add react-router-dom 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // src/index.js /..

간단하게 불변성유지 작업을 처리할 수 있는 라이브러리. "불변성에 신경쓰지 않는 것처럼 코드를 작성하되 불변성 관리를 제대로 해주는 것" yarn add immer import produce from 'immer'; const originState = [ { id : 1, todo : "전개연산자(...)와 배열 내장 함수로 불변성 유지하기", checked : true },{ id : 2, todo : "immer로 불변성 유지하기", checked : false } ] const nextState = produce(originState, draft => { //바꾸고싶은 값 바꾸기 //id가 2인 항목의 checked 값을 true로 설정 const todo = draft.find( t => t.id..

2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { const [arr, setArr] = useState(setArray); return ( {arr.map((obj, idx) => ({obj.num}))} ); }; export default App; 화면에는 10개의 데이터만 보이지만 실제로 2500개의 리스트가 한번에 렌더링되고, 불필요한 렌더링이 반복되면 프로그램이 느려지게 된다. 이럴 때 불필요한 리렌더링을 방지하는, 성능을 최적화하는 작업이 필요. 컴포넌트가 리렌더링 되는 경우는, 1. 전달..