Junnnho

redux-thunk 

비동기 로직이 간단할 때 사용한다

대체적으로 간단한 편

redux-observable

비동기 코드가 많을 때 사용한다

RxJs 패키지를 기반으로 만들어졌으며, 리액티브 프로그래밍을 공부해야하기 때문에 진입장벽이 높다

redux-saga

비동기 코드가 많을 때 사용한다

제너레이터를 활용한다

테스트 코드 작성이 쉽다

redux-saga

제너레이터에 대한 기본 이해가 필요하다

제너레이터에 대한 설명은 => junho0956.tistory.com/364

redux-saga와 제너레이터를 이용하여 아래와 같은 코드를 작성할 수 있다

function 옆의 *, yield, all, takeLeading 은 generator를 의미하는 기호 및 제공하는 함수이다

all 안에는 여러 개의 배열을 넣을 수 있으며,

takeLeading의 첫번째 매개변수는 redux에서 사용하는 액션이다

takeLeading의 특징은 현재 진행중인 액션이 있을 때, 추가로 요청되는 액션이 있으면 무시하게 된다.

즉 여러가지 요청된 액션 중에서, 우선순위가 첫번째로 들어온 액션이 높다 판단하고 실행되는 것이고,

이와 반대로 takeLatest 는 마지막에 들어온 액션을 가장 높은 우선순위로 처리하게 된다.

첫번째 매개변수인 action이 dispatch되면 두번째 매개변수의 fetchData 라는 함수가 실행되는 형태이다

아래의 fetchData를 확인해보자 

fetchData 함수 역시 제너레이터 타입이고, action 객체를 매개변수로 받는다.

함수 내부에는 put, call 이라는 함수가 있는데, 이 역시 redux-saga에서 제공하는 함수이다.

put 은 redux action을 dispatch하는 함수로, 매개변수로 선언한 액션을 발생시키는 함수이다.

call 역시 매개변수에 있는 함수를 실행하는 함수이다.

put 과 call은 비슷해보이지만,

put은 store에 있는 action을 dispatch하는 것이고, call은 임의의 지정한 사용자 함수를 실행하는 것이다.

이런 함수들은 saga에서 부수효과라고 언급하기 때문에, import 할 때 redux-saga/effects 를 사용한다

redux-saga의 부수효과 함수들은 해야할 일을 설명하는 자바스크립트 객체를 반환한다.

반환된 객체는 yield를 호출했을 때 saga 미들웨어에게 전달이 되는데,

redux의 미들웨어 쪽에서 saga 미들웨어가 실행되고 있는데, 

saga미들웨어가 반환받은 '해야할 일을 설명하는 javascript 객체'를 보고 '해야할 일'을 진행한 후에

그 결과와 실행 흐름을 다시 제너레이터로 넘겨주게 된다.

store 에서 saga를 사용해보자

saga를 사용하기 위해서 redux-saga에서 제공하는 createSagaMiddleware 가 필요하고,

위에서 saga 코드를 작성해둔 export default function* 파일을 가져와서 아래와 같이 작성한다.

createSagaMiddleware 함수로 sagaMiddleware를 생성하고, 

이를 redux store에 Middleware 적용함수인 applyMiddleware로 추가시켜준다.

제너레이터로 선언한 rootSaga 의 timelineSaga는 위에서 언급한 saga 코드를 가져온 것이며,

이를 적용시키기 위해 all 함수 내에 인자로 넣어준다.

saga 코드가 여러개인 경우에도, all 인자로 추가해서 넣어주면 된다.

그 후에, saga middleware의 실행함수인 run에 선언해둔 saga 코드의 모음인 rootSaga를 매개변수로 넣어주면

사가 미들웨어가 실행되어서 사가를 사용할 수 있게 된다.

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 파일에 환경변수를 지정하면 배포모드를 사용할 때 변수 사용이 가능하다