# react hook
React 성능최적화 및 useEffect 훅
useEffect 훅에서 조심해야할 점과 react 성능최적화에 대한 내용을 정리(useMemo, useCallback, React.memo())
react hooks(useReducer, useImperativeHandle, useLayoutEffect)
useReducer, useImperativeHandle, useLayoutEffect 훅에 대한 내용을 다룸
React-Hook 알아보기(1)
예전 버전의 React에서는 class 컴포넌트 안에서만 state를 선언, 관리 할 수 있었습니다. 하지만 16.8버전 이후에 React-Hook이 업데이트가 되면서 function 컴포넌트 에서도 state를 선언, 관리 할 수 일게 되었습니다.
Error: Invalid hook call
Error:원인내 경우는 package1 에서 package2를 npm install 하여 import 시켰더니 에러 발생위 Error가 제시하는 3 번째에 있는 원인찾아보니 원인은 package2의 @testing-library/react 패키지 때문에 문제가 발생한
React.Hook(ToDoList(1))
이제 react와 Hooks를 써서 ToDoList를 만들어보겠습니다. 이번 강의도 역시 해당 서비스를 만드신 김민준님의 책 내용입니다.먼저 yarn으로 todo라는 이름의 리액트 프로젝트를 생성하고 react-icons, classnames, node-scss도 함께
react Router withRouter와 routerHook
withRouter? 다른 것들은 무조건 Link를 사용해서 해당 component를 렌더링 하지만, withRouter를 사용하면, 굳이 Link없이도 화면 렌더링이 가능해짐 WithRouterSample.js같은 아무이름으로 파일을 만들고 난 후, 으로 import 그 다음에, 다음처럼 코드 작성 보다시피, 매개변수로 location, match...
useEffect Hook
useEffect Hook React Component가 처음으로 화면에 나타나거나 사라질때 특정 작업가능 컴포넌트의 어떤 props의 상태가 바뀌어서 업데이트 될 때, 즉 리렌더링 될 때마다 호출되는 기능 사용하기 위해선 로 import를 먼저 진행해줘야 함 사용법은 위와 같은 형식인데 뒤에 []를 deps라고 부름 이 공간이 비어있으면 처음으로 화...
react immer library
Component를 리렌더링하고 최적화 할때, 불변성이 유지되어야 함 다음과 같은 객체에서 이런식으로 바꾸게 되면 불변성이 깨짐 따라서 만약에 678910이 b에 들어가는 객체를 만들고 싶으면, 새로운 객체를 만들어서 값을 새롭게 넣어줘야 함 이렇게 해야 obj의 값이 변경되지 않아서 좋음 배열같은 경우도 값을 삽입하는 push, 값을 빼는 spl...
Context API로 전역값 관리
React를 공부하다보면 Component를 사용하기 때문에, props를 통해 여러 겹에 겹쳐서 값을 전달할 경우가 생김 마치 친구에게 지우개를 빌려달라고 했는데, 멀리 있다보니 친구가"야, 쟤가 지우개 좀 빌려달래 이거 좀 전해줘." 라고 몇 명에게 부탁해 그들을 거쳐서 나에게 도착하는 느낌 Context API를 사용하면 마치 사람을 거치지 않고 ...
Custom Hook 만들기
useState, useCallback같은 use로 시작해 import해서 사용하는 라이브러리들을 React Hook이라고 부르는데, 직접 Hook을 만들어볼 수 있음 조건: 파일명 앞에 use가 들어가야 함 예를 들어 useInputs라는 함수를 만들어보겠음 i
useReducer Hook
useReducer Hook? 상태 업데이트에 주로 썼던 useState 뿐만 아니라 useReducer로도 업데이트 가능 차이점 useState()에서는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 업데이트 useReducer()에서는 action을 기반으로 상태 업데이트, 업데이트 시 action참조 업데이트 시 참조하고 싶은 값이 있다면 di...
React.memo
React.memo를 사용하면 Props가 바뀌었을때만 리렌더링 해줌 렌더링된 결과물을 재사용할 수 있음 이렇게 선언만 해주면 됨 만약 하나의 파일에 두 가지 함수가 들어가고 둘다 렌더링에 사용될 경우, 파일명과 겹치지 않는 함수에 처럼 const를 사용해 변수를 생성하고, React.memo안에 기존의 함수를 적어줌 이를 적용하기 위해서는, useC...
useCallback Hook
useCallback Hook? 이전에 만들었던 이벤트 핸들러 함수를 재사용하는 것 useMemo와 비슷하지만, 함수를 위한 Hook Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 함 useCallback은 함수를 재사용하도...
useMemo Hook
useMemo hook? 이전에 사용된 값을 재사용하는 방식 주로 Component성능을 최적화할 때 사용 예를 들면 input에 값을 입력할 때, onChange이벤트를 발생시키면 input내부의 상태가 바뀌는데, 이때 리렌더링이 발생. 문제는 다른 바뀔 필요가 없는 것도 같이 바뀌어버림 이때, useMemo를 사용하게 되면 값이 바뀌지 않으면 리렌더...
RecoFashion - ReactDnD를 이용해 Drag & Drop 기능 구현하기
프론트 단에서 구현해야 할 핵심 기능 중 하나는 여러 가지 추천 색상을 브라우저에 띄워주고 나면, 이 각각의 색상들을 드래그 해서 오늘 입을 상의 or 하의의 색상에 드랍할 수 있도록 하는 것이었다. 드래그앤 드랍 기능을 구현해본 적이 없어서 처음엔 매우 막막했지만, 역시나 구글은 나에게 필요한 모든 것을 알려주었다. (구글 짱!) React DnD를 이...