Frontend/React6 [Hook] 커스텀 훅 커스텀 훅? 사용자가 리액트에서 제공하는 훅을 커스텀화 하는 것, 파일명을 use로 시작하는 것이 원칙이다. 왜 사용할까? 로그인, 회원가입 폼에서 값을 입력받는 부분이나 validation 체크하는 부분 등 중복되는 코드가 있다. 이러한 부분을 커스텀 훅을 이용해서 중복을 제거하고 재사용이 가능하기 때문이다. 어떻게 사용할까? 로그인 폼에서 아이디와 패스워드를 입력받는 코드를 작성했다. import React,{useState} from "react"; const Login = () => { const [id, setId] = useState(""); const [pwd, setPwd] = useState(""); const onChangeId = () => { setId(e.target.value) .. 2021. 10. 20. [Hook] 리액트 훅 훅(Hook)? 함수형 컴포넌트에서 React의 state와 생명주기 기능을 '연동' 할 수 있게 해주는 함수 사용 시에 지켜야 할 규칙 ① 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.➡︎ 반복/조건문을 사용해서 Hook을 호출❌ ② 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출할 수 있다.➡︎ 일반 자바스크립트와 class형 컴포넌트에서 호출❌ useState ➡︎ 컴포넌트에 상태 값을 추가할 수 있는 기능 import React from 'react'; function Example(){ const [state, setState] = React.useState(''); return( 상태값은 ${state}입니다. ); } export default Example; - 상탯값 변경 함.. 2021. 10. 19. 리액트 시작하기(1) -리액트와 가상 돔 ✔︎ 이 글은 "실전 리액트 프로그래밍" 책으로 공부하여 정리했습니다. 리액트? - 페이스북에서 개발하고 관리하는 UI 라이브러리 - UI 기능만을 제공하므로 개발자가 전역 상태 관리, 라우팅, 빌드 시스템 등을 직접 구축해야 함(각자 환경에 맞게 최적화 가능) 리액트를 쓰는 이유? - 상태 값을 기반으로 UI를 자동으로 업데이트함 - 가상 돔을 이용하여 이전 UI 상태를 메모리에 유지하고 변경될 UI의 최소 집합을 계산하므로 UI 업데이트의 소비 시간이 적음 +) 리액트가 나오기 전에는? 리액트, 뷰, 앵귤러와 같은 SPA(Single Page Application)이 나오기 전에는 UI를 변경하기 위해서는 개발자가 직접 브라우저의 돔(DOM)을 건드려야 했다. 이러한 코드를 잘 관리하지 않으면 프로그.. 2021. 9. 9. React Infinity Scroll 구현(2) 이번에 다룰내용 axios를 사용하여 API 호출 scroll 하단에 위치할 때, API 재호출( = Infinity Scroll) Infinity.js 전체 코드 후기 API 호출(feat. axios) // ../Utils/api.js import axios from "axios"; const apiUrl = "[사용할 url]"; // .create()를 이용해 axios 인스턴스 생성 const instance = axios.create({ baseURL: apiUrl, }); export const getComments = async (page, limit) => { const response = await instance.get( // page,limit을 parmeter로 하여 get 호출 .. 2021. 8. 12. React Infinity Scroll 구현(1) 이번에 다룰 내용 ScrollHeight, ScrollTop, ClientHeight 개념 InfinityScroll 구현 후기 ScrollHeight User에게 보이지 않는 화면까지 포함한 높이 ScrollTop User에게 "보이지 않는" 윗부분 화면 높이 ClientHeight User에게 "보이는" 부분 화면 높이 InfinityScroll 구현 // 스크롤 위치 구하는 함수 const scrollEvent = ()=>{ const scrollHeight = document.documentElement.scrollHeight; const scrollTop = document.documentElement.scrollTop; const clientHeight = document.documentEle.. 2021. 8. 12. [React Hook] 성능 최적화 들어가기 전에 React에서 성능 최적화란 무엇일까? 웹은 보여지는 화면이 많기 때문에 렌더링 횟수를 줄이는 것이 가장 중요한 것 같다. 그래서 이번에는 불필요한 렌더링을 최소화하는 방법에 대해 공부했다. 최적화를 위해 React Hook에서 useMemo와 useCallback을 지원한다. 왜(Why) 사용할까? 컴포넌트는 자신의 state가 변경되거나 부모에서 받는 props가 변경될 때, 리렌더링한다. 이때, 하위 컴포넌트에 최적화 설정을 하지 않으면 부모에서 받는 props가 변경되지 않았더라도 자식 컴포넌트는 당연히 리렌더링된다. 즉, 불필요한 렌더링이 발생한다. 개발하는 프로젝트의 단위가 커질수록 또는 props를 상속하여 자식에게 넘겨주는 경우가 많을수록 이런 불필요한 렌더링이 계속해서 발생.. 2021. 8. 12. 이전 1 다음
