Today Hailie Learned

1. init-y 하기 init -y 2. 리액트 파일 만들던가 복사하기 리액트 설치하고 import하기 npm i react react-dom 3. 웹팩, 웹팩-cli 설치하기 npm install -D webpack webpack-cli 4. 바벨 설치하기 npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react babel-loader 역할: ES6 => ES3, JSX => JS 나머지 역할 : 바벨 설정값 5. webpack.config.base.js 파일 만들기 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')..

보호되어 있는 글입니다.

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이 변경되고 업데이트가 된다는 것은 브라우저의 렌더..

forEach, map, filter, reduce 는 모두 함수를 인자로 받는 고차함수이다. forEach 인자로 함수, 배열이 들어간다. (배열은 생략가능하다!) 배열안의 값, 인덱스 넘버, 배열이 차례대로 출력된다. (찍으면) const a = [10,11,12,13,14,15]; a.forEach(function(v,i){ console.log(v,i,this); },[1,2]) // 출력값 10 0 [ 1, 2 ] 11 1 [ 1, 2 ] 12 2 [ 1, 2 ] 13 3 [ 1, 2 ] 14 4 [ 1, 2 ] 15 5 [ 1, 2 ] map 새로운 배열이 나온다. const a = [10,11,12,13,14,15]; let answer = a.map((v,i) => { return v * ..

리액트 훅이란? 단순히 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를 사용하..