Today Hailie Learned

리액트에서는 태그 대신 Link를 사용해야한다. 이유는 태그의 href로 이동하면 상태값을 잃고 속도도 저하된다고 한다. 리액트의 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 핵심 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 그래서 상태 값이 유지되지 못하고 속도도 저하된다. Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지를 새로 불러오지 않는다. 사용 예시 import { Link } from "react-router-dom"; ... log out 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

대부분의 웹앱에는 인증 DOM이 필요하다. 인증 DOM =Authentication DOM 사용자가 로그인해야만 접근 가능한 구역이 있다. 1. 리액트 앱에서 인증이 작동하는 원리 2. 사용자 인증의 예시 (가입, 로그인, 로그아웃, 로그인 시 보호된 리소스에 접근하는 법) 3. 사용자가 페이지 떠나도 로그인 유지해주는 기능 & 자동 로그아웃 기능 웹사이트에서 인증이 필요한 이유 => 보호해야 할 정보가 있다!! 유저 비밀번호, 데이터베이스에 저장된 데이터 및 미인증 사용자의 접근이 제한된 페이지에 리액트 앱이 요청을 보낼 때 그 요청을 받는 API 엔드 포인트가 그런 데이터에 속한다. 프로필 페이지 자체에도 접근 제한 + 요청받는 API 엔드포인트에도 접근 제한 걸어야 한다. 인증이 어떻게 작동할까? ..

코드 분할 (Code Spliting) 번들링을 할 때, HTML 웹 페이지에 JS를 추가하는데, 모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지면서 JS 코드 자체가 방대해지고 무거워졌다. 이를 해결하기 위한 방법으로, 번들을 물리적으로 나눈 후, 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 것이다. => 이게 바로 코드 분할! 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다. 번들 분할 하는 방법 => 서드파티 라이브러리는 npm을 통해 다운받는 라이브러리인데, 사용자에게 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다. 그래서 사용 중인 라이브러리 전부..

useRef란? 1. 특정 요소의 DOM 주소값을 가져오는 React Hook이다. React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있다. React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문이다. 그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있다. 이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있다. 하지만 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef..

Custom Hook이란? 개발자가 커스텀한 Hook! 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을때 커스텀 Hook을 사용한다. Custom Hook의 장점 1. 상태 관리 로직의 재활용이 가능하다. 2. 보다 적은 양의 코드로 동일한 로직을 구현할 수 있다. 3. 직관적으로 코드를 짤 수 있어서 명료하다. Custom Hook 만들 때 규칙 1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이기 2. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안된다. 3. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다. 주의할 점 Custom Hook을 사용했다고 해서 두 ..

렌더링 최적화를 위한 Hook, useMemo, useCallback useMemo란? 특정 값을 재사용하고자 할 때 사용하는 Hook이다. 예시 코드 해석 👉 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출력을 하고 있다. function Calculator({value}){ const result = calculate(value); return {result} ; } 만약 위의 calculate가 내부적으로 복잡한 연산을 해야 하는 함수라 계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정한다면, 해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계속해서 호출할 것이고, 그 때마다 시간이 몇 초 이상 소요가 될 것이다. 유..

리액트에는 virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전, 후를 비교하고 바뀐 부분만 적용할 수 있다. ???? (진짜) DOM이란? Document Object Model = 브라우저가 트리 구조로 만든 객체 모델이다. JS 같은 스크립팅 언어가 태그들에 접급해서 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다. DOM이 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 되면 성능에 영향을 미치게 되고, DOM의 조작 속도가 느려진다. DOM이 변경되고 업데이트가 된다는 것은 브라우저의 렌더..

리액트 훅이란? 단순히 use로 시작하는 모든 함수이다. 인쇄해서 벽에 붙여두기 2가지 메인 규칙 + 추가1 규칙 1. 리액트 훅은 리액트 컴포넌트 함수, 커스텀 훅 함수에서만 호출해야 한다. 규칙 2. 리액트 훅은 리액트 컴포넌트 함수 또는 커스텀 훅 함수의 최상위 수준에서만 호출해야 한다. (중첩함수에서, block문에서 호출 x) ex) if 문 안에서, useEffect 안에서 호출 금지 추가 규칙 3. useEffect 훅은 항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 한다. ** useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다. 그래서 의존성으로 넣을 필요 없다. 정리 => 브라우저에서 오지 않거나,..

리액트 Context란? 리액트 내부 state 저장소를 이용해서 부모를 통해 데이터를 전달하지 않으면서 저장소에서 액션을 트리거해서 관련된 컴포넌트에 직접 전달 할 수 있다. props로 모든 데이터를 자식에게 넘겨주기에는 너무 복잡할 것 같을 때 쓴다. 1. components 파일 안에 store라는 폴더를 만들고 아래 함수를 써주고 꼭 export 해주기 //전역 state에 대해 여러 개의 컨텍스트를 가질 수 있다. 물론 한개도 가능 import react from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 2. 공급하기 = 컨텍스트를 활용할 수 있어야 하는..

✔️ useState & useReducer를 언제 쓸지 알아보자 (정확하게 정해진 규칙은 없음) useState는 주요 state 관리 도구이다. 개별 state 및 데이터를 다루기에 적합하다. state 업데이트가 쉽고, 몇 종류 안되는 경우에 적합하다. 정리 => state가 변경되는 경우가 다양하지 않다면, 특히 state로서의 객체나 그 비슷한 게 없다면 useState 사용 useReducer는 state로서의 객체가 있는 경우, 또는 복잡한 state가 있을때 적합하다. 연관된 state 조각들로 구성된 state 관련 데이터를 다루는 경우에 적합하다. 정리 => 관련 state 스냅샷들이 서로 독립적이고 업데이트가 같이 잘 안된다면 useReducer 사용 ⭐️ useReducer를 사용하..