본문 바로가기
반응형

분류 전체보기

 (501)
[react] 최적화 - React.memo() & useMemo() & useCallback() React는 먼저 컴포넌트를 렌더링(rendering) 한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트한다. 다음 렌더링 결과와 이전 결과의 비교는 빠르다. 하지만 어떤 상황에서는 이 과정의 속도를 좀 더 높일 수 있다. React.memo : 컴포넌트의 결과 값을 memoized하여 불필요한 re-rendering을 관리 컴포넌트가 React.memo()로 래핑 되면 React는 컴포넌트를 렌더링 하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. React.memo(component, compFunc)..
[react & typescript] 타입스크립트 빈 배열 선언하기 오랜시간을 서치했는데, 정확히 알려주는 글은 찾지 못했지만 우연찮게 발견한 이 한 줄을 쓰니 되는 것 같다(약간 구글 피셜이라 확실치는 않음^^) [] = []
[react & typescript] event에 type 지정해주기 타입스크립트에 익숙해지려고 여러가지를 시도해보는데, 아직까지는 많이 생소한 것 같다. 특히 이벤트 객체에 대한 타입을 지정할 때 매번 구글링하는 것이 비효율적인 것 같아 자주 쓰는 것은 정리해둬야겠다. 하나씩 차차 늘려가기! 1. form submit event e: React.FormEvent 2. click event e: React.MouseEvent
[react & typescript] typescript로 forwardRef 사용하기(feat.'Component definition is missing display name' 에러) typescript를 통해 forwardRef 사용시 eslint에서 다음과 같은 에러가 발생했다. error Component definition is missing display name react/display-name 스택오버플로우를 참고하여 에러 해결! 형태도 꼭 기억해두자! const Input = React.forwardRef( ({ label, input }, ref) => { return ( {label} ); } ); 참고 사이트) https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref
[react & typescript] CRA로 typescript 설정하기(feat. esLint, styled-component) 두 시간 이상을 삽질했던.. CRA로 typescript 프로젝트 만든 후 esLint, styled-component 관련 설정 과정을 정리해보자. 언젠간 꼭 이 글이 도움이 되기를 엉엉 1. CRA 사용 npx create-react-app [프로젝트 이름] --template typescript 2. tsconfig 설정 { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "noImplicitAny": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "stri..
[react] forwardRef stackoverflow 클론 코딩 프로젝트를 진행하던 중이였다. 질문 등록 페이지를 만들며 input 또는 editor가 focus 될 경우 해당 컴포넌트로 스크롤될 수 있도록 하는 기능을 만들고 싶었다. 그래서 질문 양식에 따라 input 또는 editor 컴포넌트가 담긴 각각의 custom component에 ref를 주어 각 컴포넌트들이 focus됨에 따라 참조되어 스크롤이 해당 컴포넌트로 이동할 수 있도록 해야겠다~~ 싶었는데 왠걸!! 스크롤 이벤트가 전혀 일어나지 않는 것이였다! 그때 당시에는 이유를 찾지못하고 각 custom component를 div 태그로 감싸 그 div에 ref를 주는 것으로 땜빵(?) 해결을 하였고, 여러가지 구글링을 해보았지만 문제 자체를 파악하지 못해 제대로 된 검..
[react] context API context API란? props drilling을 사용하기 싫을 때, 즉 컴포넌트에 상관없이 전역적으로 데이터를 이용하고 싶을 때 사용한다. context API 사용 시 전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다. 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등등 다양하게 컴포넌트 간 공유되어야 할 데이터로 사용하면 좋다. context API를 사용하고 싶을 때에는 context, provider, consumer 이 세 가지 개념만 숙지하면 된다. 1. Context(전역 값 저장) Context 를 만들 땐 다음과 같이 React.createContext() 라는 함수를 사용한다. // context.js imp..
[react] useReducer(feat. useState와 비교) useReducer React(리액트)에서는 useReducer란 훅(Hook)을 제공하는데, 이 reducer(리듀서)로 상태 관리(state management)를 할 수 있다. useState와 비슷하지만 가령 두 개의 상태가 컴바인 되어 관리되어야 할 경우 같은(아이디 상태 값, 아이디 유효성 검사 통과 여부 상태 값) 조금 더 복잡한 상태 관리가 필요할 때 사용할 수 있다. useReducer 문법은 간단하다. reducer(리듀서) 함수와 initialState(초기 상태)를 전달하면 useReducer라는 훅(Hook)이 새로운 상태(state)와 dispatch(디스패치)함수를 리턴해준다. const [state, dispatchFn] = useReducer(reducerFn, initia..
반응형

티스토리툴바