React #7

 

• 유틸함수
  • 프로젝트안에 여러곳에서 쓰는 유틸함수들은 src/lib에 관리 한다
• usePromise
  • 기본 API상태를 관리해주는 파일이다.
  • 대기 , 완료, 실패
    • API호출 시 사용한 loading
      • 대기 : loading을 보여준다
    • 완료 응답값을 반환 resolved
    • 실패 : error타입을 반환 error
  • 코드
  • import { useEffect, useState } from 'react'; export default function usePromise(promiseCreator, deps) { //대기 중/완료/실패에 대한 상태 관리 const [loading, setLoading] = useState(false); const [resolved, setResolved] = useState(null); const [error, setError] = useState(null); useEffect(() => { const process = async () => { setLoading(true); try { const resolved = await promiseCreator(); setResolved(resolved); } catch (e) { setError(e); } setLoading(false); }; process(); // eslint-disable-next-line react-hooks/exhaustive-deps }, deps); return [loading, resolved, error]; }
  • usePromise Hook은 promise의 대기중, 완료 결과, 실패 결과에 대한 상태관리를 하며, usePromise의 의존 배열 deps를 파라미터로 받아 옵니다. 파라미터로 받아온 deps 배열은 usePromise 내부에서 사용한 useEffect의 의존 배열로 설정하는데 이 부분이 ESLint경고가 나타나므로 이 경고를 무시하려면 특정 줄에만 ESLint 규칙을 무시하도록 주석을 작성해 주어야 한다(// eslint-disable-next-line react-hooks/exhaustive-deps)
    • ESLint 란?
      • 자바스크립트 코드에서 발견되는 문제의 패턴들을 식별하기 위한 정적 코드 분석 도구이다
• 15장
• Context API
  • 전역적으로 사용할 데이터가 있을 때 유용한 기능이다
  • 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등등
• 터미널
  • yarn create react-app context-tutorial
• 동적 context사용
  • context의 value에는 상태값만 있어야 하는것은 아니고 함수를 전달해 줄 수도 있다.
  • 코드
  • import { createContext, useState } from "react"; const ColorContext = createContext({ state: { color: "black", subcolor: "red" }, actions: { setColor: () => {}, setSubcolor: () => {}, }, }); const ColorProvider = ({ children }) => { const [color, setColor] = useState("black"); const [subcolor, setSubcolor] = useState("red"); const value = { state: { color, subcolor }, actions: { setColor, setSubcolor }, }; return ( <ColorContext.Provider value={value}>{children}</ColorContext.Provider> ); }; //const ColorConsumer = ColorContext.Consumer와 같은 의미 const { Consumer: ColorConsumer } = ColorContext; //ColocProvider와 ColorConsumer 내보내기 export { ColorProvider, ColorConsumer }; export default ColorContext;
  • 컴포넌트에서는 ColorContext.Provider를 렌더링 하고 있다. 이 Provider의 value에는 상태는 state로 업데이틑 함수는 actions로 묶어서 전달하고 있습니다.context에서 값을 동적으로 사용할 때 반드시 묶어줄필요는 없지만 이렇게 state와actions 객체를 따로따로 분리해주면 나중에 다른 컴포넌트에서 context의 값을 사용할 때 편합니다
• 정리
  • 컴포넌트간에 상태를 교류해야할 때 부모→자식 흐름으로 props를 통해 전달 해주었는데 ContextAPI를 통해 쉽게상태를 교류 할 수 있다
  • 전역적으로 여기저기서 사용되는 상태가 있고 컴포넌트의 개수가 많은 상황이라면, ContextAPI를 사용하는 것을 권한다.
• 16장
• 리덕스 라이브러리
  • 단순히 전역상태 관리만 한다면 ContextAPI를 사용하는것만으로도 충분하지만 더욱 체계적으로 관리하려면 리덕스를 사용하는것이 좋다.
  • 코드의 유지보수성도 높여주고 작업 효율도 극대화 해주기 떄문이다. 편리한 개발자 도구도 지원하고 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리 할 수있게 해주기도 합니다.
• 액션
  • 액션 객체는 type필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 외의 값들은 나중에 상태 업데이트를 할 때 참고해야할 값이며, 작성자 마음대로 넣을 수 있다.
• 리듀서
  • 변화를 일으키는 함수이다
  • 액션을 만들어서 발생시키면 리듀서가 혅내 상태와 전달받은 액션 겍체를 파라미너로 방아옵니다. 두 값을 참고하여 새로운 상태를 만들어 반환해 줍니다
• 스토어
  • 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.
  • 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며 그 외에도 몇 가지 중요한 내장함수를 지닙니다
• 디스패치
  • 액션을 발생시키는 것이라고 이해하면 된다.
  • 이 함수는 dispatch과 같은 형태로 액션 객체를 파라미터로 넣어서 호출
• 구독
  • 스토어의 내장 함수 중 하나입니다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치 되어 상태가 업데이트 될때마다 호출한다
• 리듀서 함수 정의
  • 함수의 파라미터로 state와 action값을 받아옵니다.
  • 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 합니다. 이작업을 할 때 spread연산자를 사용하면 편합니다.
  • 객체의 구조가 복잡해지거나 배열도 함꼐 다루는 경우 immer라이브러리를 사용하면 좀 더 쉽게 리듀서를 작성할 수 있습니다.
• 단일 스토어
  • 특정 업데이트가 너무 빈번하게 일어나거나 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러개의 스토어를 만들 수도 있지만, 상태 관리가 복잡해 질 수 있으므로 권장하지 않습니다.
• 읽기 전용 상태
  • setState를 사용하여 state를 업데이트 할때도 객체나 배열을 업데이트하는 과정에서 불변성을 지켜주기 위해 spread연산자를 사용하거나 immer와 같은 불변성 관리 라이브러리를 사용했었다. 리덕스도 마찬가지로 상태를 업데이트 할 떄 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다
• 리듀서는 순수한 함수
  • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다
  • 파라미터 외의 값에는 의존하면 안됩니다.
  • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환 합니다
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 합니다
• 17장
  • 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기
  • 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화 해 줄수도 있습니다.
  • 리액트 애플리케이션에서 리덕스를 사용할때는 store인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리 합니다.
  • 터미널