21.07.14 React/리덕스 정리

진짜.최종.마지막.final.최.최종

Hooks

useState:

함수형 컴포넌트에서 상태를 관리할 때 사용한다. (즉, 값을 수정해야 하는 경우)

useState는 한개의 상태 값만 관리할 수 있어 여러개 관리해야 하면 여러개 useState 사용

• 사용법

  import React, { useState } from 'react'; //useState import
  
  const Counter = () => {
  	//배열의 첫번째 원소는 상태 값, 두번째 원소는 상태 설정 함수
    const [value, setValue] = useState(0); 
    return (
      <div>
  			<p>
          현재 카운터 값은 <b>{value}</b> 입니다.
        </p>
        <button onClick={() => setValue(value + 1)}>+1</button>//함수 호출시 배열이 반환되고 리렌더링.
  			console.log(value); // 1 (기본값 0에서 1로 바뀌어있다.)
      </div>
    );
  };

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 한다.

만약 useEffect 에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열([])을 넣어준다.

• 사용법

  useEffect(() => {
      console.log('마운트 될 때만 실행됩니다.');
    }, []);

useRef

React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 되는데, 다시 랜더링 되어도 동일한 참조값을 유지하고 싶을 때 useRef를 사용한다.

So 사용자 입력한 타이핑 값 하나하나 받을 동안 동일한 참조 값을 유지하고 싶을 때 사용한다.

useSelector

리덕스 스토어의 상태를 조회하고 싶을 때 사용하며, 만약 상태가 바뀌지 않았으면 리렌더링하지 않는다.

• 사용법

  const todos = useSelector(state => state.todos);

useDispatch

리덕스 스토어의 dispatch 를 함수 컴포넌트에서 사용할 수 있도록 해준다. (즉 dispatch 날릴 수 있게 해준다.)

useMemo

Memo는 memoized 에서 온 말인데, 이는 이전에 계산한 값을 재사용한다는 의미를 가진다.

이를 이용하면 성능을 최적화 할 수 있다.

React.memo

컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링 하도록 설정할 수 있다.

export default React.memo(CreateUser); 이런식으로 감싸면 된다.

마운트 : 처음 나타났을 때

언마운트: 사라질 때

업데이트 될 때 : 특정 props가 바뀔 때

리덕스 키워드

액션

상태에 어떠한 변화가 필요하게 될 땐, 우리는 객체 형태의 액션을 발생시킨다.

{
  type: "TOGGLE_VALUE" //타입은 필수
//그 외는 개발자 맘대로
	data: {
    id: 0,
    text: "리덕스 배우기"
  }

}

액션 생성 함수

액션 생성함수는, 액션을 만드는 함수입니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만든다.

사용 이유: 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함

export const addTodo = (data) => {
  return {
    type: "ADD_TODO",
    data
  };
}

리듀서

리듀서는 변화를 일으키는 함수. 리듀서는 state, action 두가지의 파라미터를 받아온다.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

스토어(Store)

스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가 있고 몇가지 내장함수가 있다. 리덕스에서는 한 애플리케이션당 하나의 스토어를 만든다.

디스패치 (dispatch)

액션을 발생시키는 것이다. dispatch(action) 같이 액션을 파라미터로 전달한다.

구독(subscribe)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

리덕스 모듈

액션 타입, 액션생성함수, 리듀서가 모두 들어있는 자바스크립트 파일을 의미한다.

보통 const SET_PSOT = '모듈명/SET_POST'; 이런식으로 액션타입을 작성해서 다른 모듈과 액션 이름이 중복되는 것을 방지한다.

Ducks 패턴

리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성하는 것을 말한다.

루트 리듀서

한 프로젝트에 여러개의 리듀서가 있을때는 이를 한 리듀서로 합쳐서 사용한다. 합쳐진 리듀서를 루트 리듀서라고 한다.

리듀서를 합치는 작업은 리덕스에 내장되어있는 combineReducers 함수를 사용한다.

• 사용법

cf. 리덕스 프로젝트에 적용하기 위해서는 사용한다.

Provider로 store를 넣어서 App 을 감싸게 되면 우리가 렌더링하는 그 어떤 컴포넌트던지 리덕스 스토어에 접근 할 수 있게 된다.

• 사용법 : RootReducer를 불러와서 이를 통해 새로운 store를 만들고 Provider를 사용해서 프로젝트에 적용을 한다.

리덕스 미들웨어

리덕스 미들웨어를 이용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수있다.

주된 사용 용도는 비동기 작업을 처리이며, redux-thunk와 redux-saga로 처리하게 된다.

redux-thunk

리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어로, 이를 이용해 액션 객체가 아닌 함수를 디스패치 할 수 있다.

함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와주어야 하고,이 함수를 만들어주는 함수를 우리는 thunk 라고 부른다.

사용이유: 각 컴포넌트 단의state에서 관리해주는 거 보다 전역차원에서 활용하는 편이 더욱 편리하기 때문이다.

Package

redux-actions를 통한 더 쉬운 액션관리

createAction : 액션 생성함수 역할

handleAction : 리듀서 역할

hadleAction을 사용하면 추가 데이터의 이름은 항상 action.payload가 된다.

Immer : 불변성 관리

리듀서에서 뭔가 바꿀 때 불변성 관리가 필요한데, immer를 사용하면 쉽게 관리된다.

immer는 데이터가 복잡할 때 사용하면 좋다. 상황에 맞게 사용하면 좋다.

• 사용법