반응형 Framework/React14 React.memo, useCallback(), useMemo() 리액트는 컴포넌트를 렌더링 한 뒤에 이전 결과와 비교하여 DOM을 업데이트 한다. 컴포넌트를 나누는것은 재사용성을 위해서 이지만, 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 결국 렌더링이 최대한 덜 될 수 있있게 해야하는데, 이때 리 렌더링이 필요없는 컴포넌트의 렌더링을 방지하여 성능을 높일 수 있는 방법들이 있다. React.memo 컴포넌트 렌더링 최적화 리 렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 예를들어 todoList 리액트 앱에서 todo list form영역에서 input에 입력을 하게 된다면, value를 가지고 있는 부분만 렌더링이 아닌 연관이 없는 컴포넌트까지 같이 렌더링이 되는것을 확인할 수 있다. 이러한 부분은 react.memo를 적용해서 컴포넌트에.. 2022. 10. 26. React Hook Form 회원가입 유효성 체크 📌 React Hook Form 모듈 다운 받기 npm install react-hook-form --save useForm import하기 import { UseForm } from 'react-hook-form' register() const { register } = useForm(); {...register("email")} input 태그 안에 register 함수를 spread해서 넣어줄 수 있다 (ES6 문법) watch() const { watch } = useForm(); console.log(watch('email'))` watch() 지정된 input을 관찰하고 해당 값을 반환한다. 관찰 하려는 input 요소에 register를 등록해준다. *버전 7부터 변경됨 : ref={regi.. 2022. 10. 24. 리액트 CRUD 해보기 연습용으로 만든 Dummy데이터는 고정되었기에 사용자의 액션에 따라서 데이터를 읽고 쓰고 업데이트, 삭제해보자! 그러기 위해서는 DB를 구축하고 API를 만들어야하는데, JSON서버를 이용해서 RESTful API를 만들어 보자! [REST API란?] Representational State Transfe uri주소와 메서드로 CRUD요청을 하는 것! 즉 웹 데이터 전송 방식을 말한다. Create : POST Read : GET Update : PUT Delete : DELETE URI는 식별하고, URL은 위치를 가르킨다. URI: 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스 URL: 흔히 웹 주소라고도 하며, 네트워크 상에 리소스가 어디에 있는지 알려주기 위한 .. 2022. 10. 22. React Context API 처음만난 리액트 강의에서 발췌한 내용입니다. 컴포넌트의 props를 통한 데이터 전달 기존에 일반적인 react application은 데이터가 컴포넌트의 props를 통해 부모가 자식에게 단방향으로 전달이되었다. 로그인여부, 프로필 정보등을 전달하려면 반복적이고 지저분한 코드가 많이 생성된다. 이렇게 여러 컴포넌트에 걸쳐 자주 사용하는 데이터의 경우 코드의 복잡함 등을 해소시켜 주기위해 사용할 수 있는것이 context이다. Context는 리액트 컴포넌트들 사이에서 데이터를 기존의 props로 전달하는대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달해 어떤 컴포넌트던 데이터에 쉽게 접근할 수 있다. 코드를 한 곳에서 관리하기때문에 디버깅에도 유리하다. [언제 context를 사용해야할까?] 로그인 여.. 2022. 10. 12. 이전 1 2 3 4 다음 728x90 반응형
