Junnnho

useRef

꼭 돔요소를 참조할 때만 사용하는 건 아니다.

UI 데이터가 아니더라도 렌더링과 상관없는 값을 저장할 때 useRef가 사용될 수 있다.

예를 들면) 값의 변화가 있어도 렌더링 결과가 같을 때는 굳이 useState보다는 useRef를 사용하는 것

이전 상태값을 기억하고 싶을 때도 useRef를 사용할 수 있다.

일반 변수로는 이전 값을 재활용할 수 없기 때문에 useRef 같은 훅을 사용할 수 있다.

useMemo

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.

useEffect와 마찬가지로 의존성 배열을 사용해서

이미 실행해둔 함수의 결과값을 저장해두고, 의존성 배열 내부 값이 변경될 때만 함수를 사용해고

값이 변경되지 않았을 때는 저장해둔 값을 재사용하는 방식

useCallback

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

useMemo 훅과 비슷하다.

특히 함수 메모이제이션에 특화된 훅이다.

useMemo와 useCallback은 비슷해서 헷갈리기 쉬운데,

useMemo는 결과'값'에 대한 상태값을 저장하고,

useCallback은 함수'자체'를 저장한다.

useReducer

여러 개의 상태값을 하나의 훅으로 관리할 때 사용하면 편하다

여러 개의 상태값으로 많은 로직을 다뤄야 할 때 사용하는데,

상태값은 객체로 다룰 수 있고,

상태값 변경 함수는 action을 발생시키는 dispatch 형태이다.

type을 통해서 여러가지 상태값을 구분해주자

useImperativeHandle

클래스형 컴포넌트의 부모컴포넌트는 ref 객체를 통해서

자식 컴포넌트의 메서드를 호출할 수 있다.

이 방식은 자식 컴포넌트의 내부 구현에 대한 의존성이 생긴다.

useImperativeHandle 훅을 사용하면 함수형 컴포넌트에서도 멤버변수(함수)를 사용할 수 있다.

즉 자식 컴포넌트가 제공하는 값을 부모 컴포넌트가 사용할 수 있는 것

useLayoutEffect

useLayoutEffect 훅은 useEffect 훅과 거의 비슷하게 동작하지만,

부수효과 함수를 '동기'로 호출한다는 것이 다르다.

즉 렌더링 결과가 돔에 반영된 직후에 바로 호출된다.

동기로 즉시 실행하기 때문에 가급적 연산이 많은 부수효과는 useEffect에서 호출하는 것이 맞다.

useLayoutEffect는 대체로 이런 경우에 사용한다.

렌더링 직후에 돔 요소의 값을 읽어들이는 경우,

조건에 따라 컴포넌트를 다시 렌더링하고 싶은 경우

렌더링을 하고 실제 돔에 반영은 했지만 브라우저가 화면에 돔을 그리는데 걸리는 시간이 있다.

이때 useEffect를 사용하면 비동기를 사용하기 때문에 브라우저가 화면을 그리고 나서 원하는 코드가 실행될 수도 있다.

useLayoutEffect는 브라우저가 화면을 그리기 '전에' 동기로 즉시 실행되기 때문에 좀 더 빠르게 원하는 컴포넌트 형태를

조절할 수 있는 것이다. 

useDebugValue

리액트 개발자 도구에 좀 더 많은 정보를 제공할 수 있는 훅

code로 개발하면서 필요한 단축키/json 중에 유용했던 것들을 저장해두겠습니다.

생길 때 마다 수정하겠습니다.

같은 단어 모두 다 선택하기

단어를 선택한 다음에 ctrl+shift+L

jsconfig.json

// auto import 가능
{
    "compilerOptions": {
        "jsx":"react",
        "module":"commonjs",
        "target":"es6",
        "checkjs":true // typescript 처럼 타입체크가능
    },
    "exclude":["node_modules"]
}

## 본 게시글은 강의를 들으면서 필요한 부분들을 개인적으로 정리한 것 입니다.

## 어떤 강의인지는 밝히지 않으며 저작권에 대한 문제가 있을시 삭제할테니 말씀해주세요!

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

CRA 4가지 명령어

start 명령어는 '개발모드'로 실행할 때 사용하는 것으로 최적화가 되어있지 않은 상태이기 때문에

'배포'할 때 사용하면 안된다.

start로 시작하게 되면 default는 HTTP로 실행된다.

HTTPS는 HTTP에 보안 등의 여러가지 기능이 추가된 업데이트 http이다.

https로 실행하고 싶을 때는

window 기준 set HTTPS=true && npm start

macos 기준 HTTPS=true npm start

를 사용한다.

build 명령어는 배포할 때 사용된다.

빌드를 하게 되면 정적 파일이 생성된다.

npm run build를 이용해서 빌드를 하면 아래와 같은 정적 파일이 생긴다.

서버에서는 생성된 build 폴더 안에 있는 내용들을 정적 파일로 서비스하면 된다.

'별도로 서버에 애플리케이션을 실행하지 않기 때문에 SSR로 동작할 수 없는 것이다'

로컬에서 정적 파일을 서비스 하기 위해서는 serve 패키지를 사용한다.

(설치는 npm install serve!)

(실행은 npx serve -s build) <= build 폴더에 있는 정적 파일을 서비스한다.

test는 아직 내가 사용하기에 먼 내용이라서 패스..

eject도 마찬가지긴 하지만..

eject는 react-script를 사용하지 않고 모든 설정 파일을 추출하는 명령어이다.

cra를 기반으로 직접 개발환경을 구축하고 싶을 때 사용하는 것으로,

추출하지 않으면 cra 기능이 추가됬을 때 react-scripts 버전만 올리면 되는데, 

추출을 하면 수동으로 설정 파일을 수정해야 하는 단점이 있다.

polyfill

polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드이다.

예를 들면 padStart 같은 문자열 함수를 사용할 때, 이를 지원할 수 있는 브라우저가 있고 아닌 브라우저가 있다.

지원되지 않는 브라우저는 대표적으로 IE가 있다.

polyfill을 추가하기 위해서는 대표적으로 core-js를 많이 사용한다.

github에는 core-js 관리 페이지가 있는데,

이 중에서 polyfill을 추가하길 원하는 대상을 찾아서 index.js 에 import 하면 지원 가능해진다.

** cra에는 core-js를 자동으로 패키지에 포함시키기 때문에 설치할 필요가 없다 **

환경변수

개발, 테스트 또는 배포 환경 별로 다른 값을 적용할 때 사용한다.

전달된 환경변수는 js 내 코드에서 process.env.변수이름 의 형식으로 사용한다.

환경변수를 커맨드라인에서 직접 지정할 수 있는데,

react에서는 항상 아래와 같은 규칙을 따른다.

REACT_APP_*

ex) REACT_APP_KEY

** 리액트에는 기본적으로 NODE_ENV 환경변수가 지정되어 있는데

** 개발모드인 start 로 실행하면 NODE_ENV 는 development가 되고

** 배포모드인 build로 실행하면 NODE_ENV 는 production이 된다.

** 환경변수를 .env 파일로 직접 관리할 수 있는데

** .env.development 파일에 환경변수를 지정하면 개발모드를 사용할 때 변수 사용이 가능하고

** .env.production 파일에 환경변수를 지정하면 배포모드를 사용할 때 변수 사용이 가능하다

em은 타이포그래피에서 현재의 지정된 포린트 사이즈를 나타내는 단위

즉 현재 폰트 사이즈를 나타내는 단위

em는 선택된 폰트에 상관없이 항상 고정된 폰트 사이즈를 가진다.

em 이라는 것은 부모의 폰트 사이즈에 상대적으로 크기가 계산이 된다.

rem 의 r은 root를 의미한다.

=> root에 지정된 폰트 사이즈에 의해 크기가 결정된다.

나누는 기준 1

부모 요소의 사이즈에 따라서 사이즈가 변경이 되야 된다면 %, em

부모와는 상관없이 브라우저의 사이즈에 대해서 반응해야된다면 vw, vh, rem

나누는 기준 2

요소의 너비와 높이에 따라서 사이즈가 변경되야 한다면 %, vw, vh

font 사이즈에 따라서 사이즈가 변경되야 된다면 em, rem