본문 바로가기

Front-End94

useEffect html 렌더링 이루에 동작하기 때문에 오래 걸리는 작업을 넣어볼 수 있다 Lifecycle에서 mount update unmount 과정에 실행 가능하다. - cleanup function : useEffect 동작 전에 특정 코드를 실행하는 방법 => useEffect를 통해 생성되는 코드가 있다면, 의존성 배열때문에 그게 계속 추가될 수 있다. 새로운 것은 추가하되 이전 것은 삭제하고 싶은 경우 등에 사용될 수 있다. useEffect(()=>{ // 2번째로 실행 return ()=>{ // 1번째로 실행 } }, [state변수]) 각 useEffect 코드의 차이점 // (1) useEffect(()=>{ ... }) // (2) useEffect(()=>{ ... }, []) // (3) u.. 2023. 3. 28.
bootstrap (리액트 vscode) 1. npm install 할 때 react-bootstrap을 해야 function 컴포넌트 사용 가능 (안그러면 class 형이라서 오류 발생) npm install react-bootstrap bootstrap 2. CDN publid index.html 파일의 태그 안에 붙여넣기 src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 파일들은 그대로 보존된다 2023. 3. 28.
타입스크립트 기본 내용과 헷갈리는 부분 정리 타입 스크립트 기본 let 변수명 :타입지정 = let 변수명:string[] let 변수명:{key:string} let 변수명: string | number type 키워드를 사용하면 타입을 변수처럼 사용 가능하다, type 변수타입 = string let 변수명: 변수타입 = 'hello-kk' 내가 만든 타입도 가능한데, 이 경우에는 타입으로 넣어준 값만 대입 가능하다. type helloType = 'hello-kk' let 변수명: helloType = 'hello-kk' 함수 타입 function 함수명(x :string) :void{ console.log(x) } 함수에서 타입이 확실하지 않은 경우, narrowing 또는 assertion 문법을 사용해야 오류가 없다. if (typeof.. 2023. 3. 28.
Virtual DOM 실제 DOM을 복사한 게 가상 돔 수정할 element, 그의 하위 element를 찾아서 교체 가상돔은 실제 브라우저 화면에 접근하는게 아니기 때문에 가볍다. 리액트는 2개의 가상돔 객체를 갖고 있다. 1. 렌더링 이전 가상돔 2. 렌더링 이후 가상돔 Diffing: 둘을 비교해서, 어떤 지점이 바뀌었는지 찾아낸다. Batch Update: 만약 10개의 요소가 바뀌었다면 10번에걸쳐서 바꾸는게 아니라, 변경된 모든 부분을 한번만에 집단으로 바꾼다) 변경된 돔만 수정 Reconsiliation 재조정 과정: Diffing 파악 후, Batch(집단) Update하는 과정 2023. 3. 23.
Ant-Design InternalTable https://github.com/ant-design/ant-design/blob/master/components/table/InternalTable.tsx https://ant.design/components/table 2023. 3. 22.
state 란? 무엇인가 . . .🙄 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. 거의 내가 알고있는 개념에 부합하는데, 최근에 데이터를 state로 관리하면서.. 코드를 분리할 때 데이터와 state에 대한 고민을 많이 했다. 초반 고민은 데이터 관련된 로직이 너무 길었기 때문에 코드를 다른 파일로 분할하는 것 이었다. 1. axios로 받은 500개 가량의 객체 데이터들을 받고 2. 해당 데이터를 state로 저장한다. 3. 데이터를 필터링 한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 4. 데이터를 정렬한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 5. 렌더링을 한다. 그래서 코드를 분리하려고 했고, 시도해본 방법은 크게 두가지였다... 2023. 3. 22.
커링 curring 의문점1. 왜 매개변수를 쪼개서 사용해야 하지? 2. 사용되는 형태를 찾아보기 3. 헷갈리는 점은 매개변수에 콜백 함수가 들어올 때 인 것 같다. 4. 모던 javascript 예제는 어렵게 느껴진다.. 쉬운 글부터 찾아서 읽어봐야지 5. 리턴 되고나면.. 그 이후의 상황.. 이전 매개변수를 어떻게 사용할수가 있지? => 그러면 무조건 const 함수2 = 함수1(x) 형태의 표현식을 사용해서 할당해야 하는건가?.. 그렇다고 하더라도.. 매개변수가 유지되는 건가? 일단 매개변수 n개 중 m개만 미리 받아둠 나중에 n-m개를 받아서 중간에 리턴문이 들어갈수가 있나? 아니면 중간 클로저 어딘가에 지역변수가 사용되거나? const FuncA = (x) => (y) => { return x + y } const.. 2023. 3. 17.
React.memo 실험 이전에도 React.memo 개념글을 작성한 적이 있는데, https://hello-kk.tistory.com/679 리-렌더링을 막기 위한 방법으로 다시 접근해보니 새로워서 다시 정리했다. //App.jsx import { Fragment, useState } from "react"; import Tmp from "./Components/Tmp"; function App() { const [state, setState] = useState(1); const handleButton = () => { setState((prev) => prev + 1); }; return ( hi~ {state} 버튼 ); } export default App; (1) React.memo를 사용하지 않은경우 버튼을 매번 클.. 2023. 3. 17.
state 관리 대상 줄이기를 고민하다가 => useMemo, useCallback까지 useState를 사용해서 state를 관리할 때, 렌더링을 고민하게 되면서 state 변수와 관련되어 있지만 직접적으로 렌더링에 관여하지 않아도 되는 함수 혹은 변수에 관심이 생겼다. 'state와 구분해서 사용한다면 렌더링 되는 횟수를 줄일 수 있지 않을까?' 같은 의문에서 포스팅을 시작했던 것 같은데.. 어떤 변수 혹은 함수를 state로 관리하지 않을 수 있을까? 모든 것을 state로 관리하지는 않아도 될텐데. 일단 index.js에서 React.StrictMode를 삭제한다. 그렇지 않으면 두번 실행되어서 값에도 영향을 미치게 된다. //src/index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.ren.. 2023. 3. 17.

티스토리툴바