반응형 분류 전체보기144 React.memo, useCallback(), useMemo() 리액트는 컴포넌트를 렌더링 한 뒤에 이전 결과와 비교하여 DOM을 업데이트 한다. 컴포넌트를 나누는것은 재사용성을 위해서 이지만, 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 결국 렌더링이 최대한 덜 될 수 있있게 해야하는데, 이때 리 렌더링이 필요없는 컴포넌트의 렌더링을 방지하여 성능을 높일 수 있는 방법들이 있다. React.memo 컴포넌트 렌더링 최적화 리 렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 예를들어 todoList 리액트 앱에서 todo list form영역에서 input에 입력을 하게 된다면, value를 가지고 있는 부분만 렌더링이 아닌 연관이 없는 컴포넌트까지 같이 렌더링이 되는것을 확인할 수 있다. 이러한 부분은 react.memo를 적용해서 컴포넌트에.. 2022. 10. 26. express 사용해 보자! express는 node.js를 이용해서 서버를 개발할 수 있는 프레임워크이다. 직접 폴더 구조를 구현할수도 있지만 cli명령어들을 제공해준다. global 설치 npm install express-generator -g 제대로 설치되었는지 확인해보기 express -h 만일 파일 실행시 오류가 난다면 express 모듈을 다시 설치해주자 npm install express express 프로젝트 생성 express --view=ejs myapp 명령어를 통해서 프로젝트를 생성한다. view 엔진을 'ejs'를 사용하겠다는 의미이고, 맨 마지막은 프로젝트 이름이다. npm install ejs ejs템플릿 사용을 위해 ejs모듈 설치 (ejs, pug는 express에서 웹페이지를 동적으로 처리하는 템플.. 2022. 10. 24. [Web] GET과 POST의 비교 및 차이 사용자가 어떤 홈페이지로 이동하기 위해서 URL을 브라우저 주소창에 작성하고 엔터를 누르면 원하는 페이지로 이동합니다. 사용자는 단순히 URL(Uniform Resource Locator)을 입력하였을 뿐이지만 서버 내부에서는 클라이언트의 요청에 응답(웹페이지로 표현)하기 위해서 처리를 해주어야 합니다. 여기서 클라이언트가 서버로 요청을 보내는 방법인 HTTP Method에는 크게 2가지 방식이 있는데, 그것이 바로 오늘의 주인공인 GET방식과 POST방식입니다. 오늘인 이 두 방식에 대해서 비교하며 장, 단점 및 차이점에 대해서 알아보도록 하겠습니다! 1. GET 방식 먼저 GET 방식에 대해서 알아보도록 하겠습니다. 영어 Get이라는 단어는 가져오다라는 뜻을 가진 단어인데요, 이를 활용해서 이해하면 .. 2022. 10. 24. 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. 이전 1 ··· 25 26 27 28 29 30 31 ··· 36 다음 728x90 반응형