58 :: React에서 Redux, 테스트

엘리스 SW 엔지니어 트랙 58일차

실시간 강의날

 

 

Redux로 CRUD 

setState 배운지도 얼마 안된 참이라

Redux가 더욱 편하게 해준다고 이해가 쉽게 잘 안되지만

props로 넘겨주는 일을 하고 있지 않은 것이 좋네

 

Redux는 어플리케이션의 심장 같은 녀석이라고 한다

좋은 엔진을 얻었다고 생각하라고도 하신다

 

Redux 없이 만든다면

props drilling 을 해야할 수도 있다

 

 

React에서 Redux 사용 방법

<Provider>

이걸로 감싸줘야 이 안에서 redux를 사용할 수 있다

<Provider store={store}>
      <div>
        <h1>Root</h1>
      </div>
</Provider>

 

 

읽을 때

useSelector 훅

useSelector는 함수를 매개변수로 받는다

function selectorHandler(state) {
	return state.number;
}
const number = useSelector(selectorHandler);

 

 

상태 변경시

useDispatch 훅

const dispatch = useDispatch();
return (
    <div>
      <h5>Right4</h5>
      <input
        type="button"
        value="+"
        onClick={() => {
          dispatch({ type: "INCREASE" });
        }}
      ></input>
    </div>
  );

 

react-redux 사용하면 subscribe가 필요없다

알아서 렌더링 되네?

 

 

테스트

디버깅이 중요하다

코딩 과정에서 테스트

Test Driven Development: TDD

테스트 중심 개발

 

JEST라는 걸로 테스트 해본다

 

 

describe

테스트 돌리면 describe에 적히 내용이 분류 이름이 된다

 

test

test(이름, 테스트 내용)

 

expect

테스트할 변수나 값

 

toBe

앞에 있는 변수나 값이 다음 값이라 같은지 확인

 

toEqual

배열 내부 값도 모두 확인

 

describe("테스트 묶음", () => {
  test("1 + 1", () => {
    expect(1).toBe(1)
  })
  
  test("1 != 2", () => {
    expect(1).not.toBe(2)
  })
})

 

beforeEach

매 테스트 수행 전에 먼저 수행되는 함수

 

beforeEach 예시

describe("테스트 묶음 2", () => {
  beforeEach(() => {
    temp = 1
  })
  
  test("temp * 5 = 5", () => {
    temp *= 5
    expect(temp).toBe(5)
  })
  
  test("temp = 1", () => {
    expect(temp).toBe(1)
  })
})

 

afterEach

매 테스트 후에 시행되는 함수

 

 

참고 링크

Recoil - 상태 관리

=> https://ui.toast.com/weekly-pick/ko_20200616

 

상태 관리 통계 npm 다운로드 수

=> https://www.npmtrends.com/recoil-vs-redux-vs-mobx

 

Git 3 way merge 생활코딩 강의

=> https://www.opentutorials.org/course/2708/15307

 

React test act 문서

=> https://reactjs.org/docs/testing-recipes.html#act

 

Notionpolios

=> https://www.notion.so/customers/personal-websites

=> https://notionmax.com/

=> https://optemization.com/

=> https://anabelli.notion.site/Anabella-Spinelli-a42a2aaf9a434729b442165ff531d2d8

=> https://www.redgregory.com/notion/2021/7/15/17-clean-websites-built-with-notion-to-inspire