오늘 한 일

데일리 밋업

• jsonserver 연결 부분을 js 파일로 생성 하였던것을 ts파일로 변경
• service로 생성한 파일들의 네이밍을 axiosfactory로 변경
• React.useState vs useState 의문점
  따로 import 하지 않아도 된다는 것과 React.으로 시작하면서 React에서 제공하는 기능임을 알아보기 쉽기에 사용한다.
  use로 시작하는 hook들이 customHook이 나오면서 구분이 잘되지 않는 경우가 있기에!
  React.useState 와 같은 방식을 이번 프로젝트에 도입해보기로했다. (컨벤션 같음!)

TS Study

Recoil Study

Atom

• Recoil 의 상태 단위
• 스토어에 저장되고 갱신되는 데이터는 모두 Atom을 기반으로 함
• 아톰이 갱신될 때 그 상태를 구독(subscribe) 하고 있는 컴포넌트는 새로운 값으로 리렌더 된다.
• 아톰은 atom() 함수에 key 와 default 을 전달해서 작성한다.

import { atom } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0
});

Selectors

• Selector 는 상태를 기반으로 전달된 데이터를 가공할 때 사용한다.
• selector() 함수에 key 와 get 와 set 를 전달하여 작성합니다.
• get 프로퍼티는 계산에 사용되는 함수
• 전달된 get 인수를 사용해서 아톰(Atom)이나 다른 셀렉터(Selector)에 접근할 수 있으며, 접근한 아톰이나 셀렉터가 업데이트 되면 다시 계산된다.
• 셀렉터는 쓸 수(write)없기 때문에 useRecoilState를 사용하지 않고 useRecoilValue를 사용한다.

import { selector } from 'recoil';
...

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

위 예제의 셀렉터는 fontSizeState 상태를 가져와 폰트 사이즈를 출력하는 순수 함수처럼 동작한다.

import { useRecoilState, useRecoilValue } from 'recoil';


function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

비동기 데이터 쿼리

• Recoil 에선 동기 / 비동기 함수 모두 selector 에서 처리할 수 있다.
• 단, React 의 render() 함수가 동기이기 때문에 promise 가 resolve 되기 전에 렌더링 할 수가 없다.
• 이때 대기중인 데이터를 처리하기 위해 Recoil 은 React Suspense 와 함께 사용되도록 디자인되어있다.
• 컴포넌트를 Suspense 로 감싸서 대기중인 하위 항목들을 잡아내고 fallback UI 를 대신 렌더한다.
• 참고자료

TS + React + recoil todolist만들기

1. Create-React-App

npx create-react-app ./ --template typescript

2. recoil / axios 설치

npm i recoil axios

3. 불필요한 파일 삭제

App.css , App.test.tsx, logo.svg 파일삭제

4. index.tsx에 RecoilRoot 연결

• RecoilRoot는 recoil 상태값을 사용할 수 있는 Provider 형태를 제공한다.
• RecoilRoot로 <App/> 컴포넌트를 감싸준다.
• rocoil로 비동기 처리를 하기위해서는 react suspense로 감싸줘야 한다.

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <Suspense fallback={<p>Loading..</p>}>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </Suspense>
  </React.StrictMode>
);

🙋🏻‍♀️ 궁금증!! Suspense 가 뭐지?, fallback 뭐지 ?

5. App.tsx에서 atom, selector, recoilvalue, axios 설정

1. import { atom, selector, useRecoilValue } from "recoil";
2. todoIdstate, todoItemQuery 생성
3. 더미데이터로 연습할 jsonplaceholer API 연결

const response = await axios.get(`https://jsonplaceholder.typicode.com/todos/${id}`)

4. App에서 잘 그려지는지 확인

import React from "react";
import { atom, selector, useRecoilValue } from "recoil";
import axios from "axios";

const todoIdState = atom({
  key:'todoIdState',
  default: 1
})

const todoItemQuery = selector({
  key: 'todoItemQuery',
  get: async({get}) =>{
    const id = get(todoIdState);

    const response = await axios.get(`https://jsonplaceholder.typicode.com/todos/${id}`)
    return response.data;
  }
})

function App() {
  const data = useRecoilValue(todoItemQuery)
  return <div>{data.title}
  {data.userId}</div>;
}

export default App;

6. 강의가 다시 시작됨!!!, App.tsx에 연결하는것으로 바뀜

• RecoilRoot는 atom의 context를 제공하는 provider로 recoil hooks를 사용하는 모든 컴포넌트의 최상위 컴포넌트에 선언이 되어야 한다.

import React from "react";
import { RecoilRoot } from "recoil";
function App() {
  return <RecoilRoot>Hello Recoil</RecoilRoot>;
}

export default App;

7. emotion, react-icons, uuid 설치

npm i @emotion/styled @emotion/react react-icons uuid

....여기서 스탑!!!!!!!!!!!! 강의 그만!!!!!!!!

TS로 하다보니 어려움이 계속생긴다.......
todolist를 타입스크립트로 만드는 강의가 있어서 들으면서 해보려했는데,
계속 중간중간 모르는 개념이 나올때마다 멈추게되어서,
내일부터는 공부방식을 바꿔봐야할것같다.
일단은, 급한대로 팀원이 한방식대로 내 코드를 타입스크립트로 바꿔서 데이터를 받아오는 것 까지 했다.
내일은 이 서버에서 받아오는 코드를 이해해보고, 자유자재로 써봐야겠다!
그러려면, 이 프로젝트가아닌 그냥 타입스크립트에대한 공부를 좀 더 해보고 와야겠다!

또한, 오늘 리코일 도입관련 논의가 있었다.
과연!!!! 리코일 상태관리 정말 필요한것인가 ????
왜냐면 지금까지의 생각으로는 2개의 페이지만 존재하는데, 각각의 페이지가 공통된 상태를 공유하지 않는다 판단하여 그럼 상태를 공유하는 것이 있다하더라도 뎁스가 깊지않을것같은데, 그냥 props로 하는게 낫지않을까? 라는 논의를하다,
데이터를 주 단위로 변경을 해주고, 그때마다 각각의 컴포넌트의 렌더를 해줘야하는데, 테이블 데이터, 차트 데이터 다 각각의 컴포넌트로 관리를 할것이라 생각되어 결론적으로는 리코일을 도입하기로 하였다.
새로고침이 되었을때마다 데이터를 유지하지 못하지않나? 라는 생각도 했는데, 이부분은 아직 리코일 과 상태관리를 잘 모르는것같아서, 좀더 고민을 해봐야하는 사안같다.