[KUIT] 6주차 워크북 보충

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

1. React Hook이란?

함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리

 

규칙1. 최상위에서만 Hook을 호출해야한다.

→ 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.

 

규칙2. 리액트 함수 내에서만 Hook을 호출해야 한다.

→ Hook은 일반적인 js 함수에서는 호출하면 안된다.

 

출처: https://choijying21.tistory.com/60

 

React Hooks = 독립적인 state 데이터 조작 API

 

useState = 독립적으로 데이터를 관리할거야

useEffect = 독립적으로 side-effect를 관리할거야

useMemo = 독립적으로 데이터 캐싱을 관리할거야

useCallback = 독립적으로 함수 캐싱을 관리할거야

useRef = 독립적으로 데이터를 가리키는 레퍼런스를 관리할거야

useReducer = 독립적으로 이벤트 handling을 관리할거야

 

React Hooks가 되지 못한 것들

useSuspense → 다른 컴포넌트의 영향을 받기 때문(독립적인 데이터로 관리가 안됨)

useCatch(useThrow)

useProvider → Provider와 Consumer는 서로 소통하기 때문

useShouldComponentUpdate → 함수와 데이터가 서로 영향을 주고 받기 때문

출처: https://quickchabun.tistory.com/107

---

2. 테스팅 도구들

Jest

→ Jest는 Facebook에서 개발한 JavaScript 테스팅 프레임워크로

→ 유닛 테스팅과 통합 테스팅을 모두 지원

→ Jest는 모의 함수(mock functions), 비동기 코드 테스팅, 스냅샷 테스팅 등 다양한 기능을 제공

fireEvent

→ fireEvent는 @testing-library/react에서 제공하는 함수

→ 사용자의 상호작용을 시뮬레이션하기 위해 사용

→ 예를 들어 버튼 클릭이나 입력 필드에 텍스트 입력 등의 이벤트를 발생시킬 수 있음

→ fireEvent는 정확히 지정한 이벤트만을 발생시킴

userEvent

→ userEvent는 @testing-library/user-event에서 제공하는 라이브러리

→ fireEvent와 유사하게 DOM 요소에서 이벤트를 발생시키지만, 사용자의 실제 상호작용을 더욱 정확하게 시뮬레이션

→예를 들어, userEvent.click을 수행하면 내부적으로 여러 fireEvent가 순차적으로 실행

→ 이는 실제 브라우저에서 사용자의 상호작용이 일어날 때 발생하는 여러 이벤트를 모방하기 때문

 

---

3. 뷰 로직과 비즈니스 로직

우리가 만드는 서비스와 관련된 이야기를 할 때, 어떻게 보여줄지 논의하는 걸 제외하면 모두 도메인, 즉 비지니스 로직이다. - Eric Evans

 

비즈니스 로직은 어떤 수준에서 관리되어야할까?

->컴포넌트 수준에서 사용되는 건 불가능하지 않지만 어려운 점이 많다.

 

비즈니스 로직은 하위 컴포넌트의 변경에 영향을 받지 않는 페이지 수준에서 관리되어야한다.

• 비즈니스 로직의 규모가 작고, 특정 컴포넌트 영역에만 영향을 준다면?
  • 페이지 단위의 비즈니스 로직을 구축하는 비용을 절감하기 위해 위와 같은 방법을 사용하는 것도 효과적이고, 효율적인 방법이 될 수 있다.
• 페이지 수준에서 비즈니스 로직을 다뤄야한다면?
  • 페이지의 세션이 유지되는 동안 비즈니스 로직의 상태가 유지되도록 해야한다.
  • → 리액트의 경우 대표적으로 ’Context API’ 가 있음
  • → 이를 활용해 비즈니스 로직의 상태와 뷰의 상태를 분리하여 관리할 수 있음

 

비즈니스 로직 관리 Tip

로직의 분리는 환경을 구분하지 않는다!

분리를 하는 것은 리액트 프로젝트를 잘 운영하는 것보다 더 근본적인 이유를 갖는다.

1. 어떤 환경에서든 조금 더 장수할 수 있는 프로젝트를 만드는 것
2. 프로젝트를 갈아엎거나 기술을 변경하는 것 외에 문제를 해결할 수 있는 방법을 추가적으로 갖는 것

출처: https://velog.io/@yjinhann/프론트엔드-아키텍처-뷰-로직과-비지니스-로직