[SidePJ] 깃허브 Issue Cracker 3부 - Recoil 상태관리의 시작

드디어 마지막 주가 왔다. 

이번 미션의 마지막 주이자 , 코드스쿼드의 마지막 주다.. 

6개월동안 열심히 달렸는데  끝이 보이는 것 같아 너무 아쉽다.  (물론 나의 실력은 아직 갈길이 멀다)

그래도 화이팅하며 이번주 미션 최선을 다해서 라쿤과 함께 끝내볼 것~!!!!!! 아Zㅏ~~~~🔥

 

---

📌TypeScript와 Recoil을 활용한 모달 외부영역 클릭시 닫힘 처리

사실 airbnb에서 했어서 간단히 될 거라 생각했는데 생각보다 타입스크립트의 길은 험난했다.

 

❖ 원하는 상황 

+아이콘 click : SideBarDrop 열림

모달 외 영역 click : SideBarDrop 닫힘

 

 

❖ 오류 상황

Type '{ ref: RefObject<HTMLDivElement>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'ref' does not exist on type 'IntrinsicAttributes'.  TS2322

일단 기본적으로 TS2322는 타입 오류

xx is not assignable to type 은 props로 내린 값을 사용하지 않을 때, 나오는 에러라고 한다.

출처(https://kyounghwan01.github.io/blog/dev-report/error-report/React/#can-t-perform-a-react-state-update-on-an-unmounted-component)

 

현재 상황

const SideBar = (): JSX.Element => {

  const [isDropAsignee, setIsDropAsignee] = useRecoilState(dropAsigneeState);
  const dropDownElement = useRef<HTMLDivElement>(null);

  const dropAsigneeHandler = () => {
    setIsDropAsignee(!isDropAsignee);
  };

  useEffect(() => {
  
    const dropCloseHandler = (e: MouseEvent): void => {
    
      if (
        dropDownElement.current &&
        !dropDownElement.current.contains(e.target as Node)
      ) {
        setIsDropAsignee(false);
      }
    };
    
    document.addEventListener('mousedown', dropCloseHandler);
    return () => {
      document.removeEventListener('mousedown', dropCloseHandler);
    };
  }, []);


  return (
    <SideBarStyle>
      <SideBarCell>
        <SideBarTitle>
          <TextGroup type={T.SMALL} content={'담당자'} color="#6E7191" />
          <CustomAddIcon onClick={() => dropAsigneeHandler()} />
          <div ref={dropDownElement}>{isDropAsignee && <SideBarDrop />}</div>
        </SideBarTitle>
     </SideBarCell>
     //생략
   </SideBarStyle>
 )};  

+아이콘 click  

isDropAsignee 라는 담당자 Drop의 상태를 생성한 후에

dropAsigneeHandler 함수로 컨트롤함으로써 간단하게 만들었다.

 

--->문제는 외부 영역 클릭이다!

 

모달 외 영역 click 

1) dropDownElement 로 useRef 생성  = <SideBarDrop> component에 ref

2) dropCloseHandler로 useRef값과 클릭 값을 비교하여 모달 외 영역 클릭 시에만 닫히도록 설정 

 

 

❖ useRef의 타입 

const element = useRef<HTMLDivElement>(null);

출처 https://linguinecode.com/post/how-to-use-react-useref-with-typescript

 

❖ event의 type

const dropCloseHandler = (e: MouseEvent): void => {
    
      if (
        dropDownElement.current &&
        !dropDownElement.current.contains(e.target as Node)
      ) {
        setIsDropAsignee(false);
      }
    };

다음과 같이 type은 알맞게 설정해 줄 수 있었지만, 

조건부 Component 자체에 ref를 지정하는 것이 되지 않았다. 

 

판단으로는 Modal이 생성되기 전에도 useRef자체가 값을 가지고 잇어야 하기 때문에 

클릭이 되었을때나 보여지는 SideBarDrop 에 useRef를 걸지 않고 자리를 가지고 있어야 한다고 판단했다. 

이부분에 대해서는 추가적으로 공부가 필요할 듯 하다

 

 

 //수정 전 

{isDropAsignee && <SideBarDrop ref={dropDownElement}/>}


// 수정 후

<SideBarDropDiv ref={dropDownElement}>
	{isDropAsignee && <SideBarDrop />}
</SideBarDropDiv>
       

따라서 이와같이Div로 감싸고 Div에 ref 함으로써 해결했다!

 

 

참고: https://close-up.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EC%99%B8-%ED%81%B4%EB%A6%AD-%EA%B0%90%EC%A7%80

https://www.pluralsight.com/guides/using-react-refs-typescript

 

---

📌 Recoil 공부하고 적용하기

 

Recoil은 내부적으로 ContextAPI를 기반으로 하기 때문에 Recoil로 state를 사용할 컴포넌트는 Contextet공급자 안에 있어야 한다.

RecoilAPI는 여러개를 사용할 수도 있고, 중첩도 가능하다 -> 이때 RecoilAPI는 가장 가까운 조상 RecoilRoot에 접근한다.

참고(https://taegon.kim/archives/10105)

 

Atom:

Recoil의 단위 데이터

스토어에 저장되고 추출되는 데이터는 모두 Atom을 기반으로 한다.

고유한 key와 default(기본값)을 가지고 있다.

 

atom은 객체, 배열 다 가능함

export const userState = atom({
  key: 'userState',
  default: null,
});

export const userState = atom({
  key: 'userState',
  default: {
  	id:1
    name:'tami'
  }
});

 

컴포넌트는 atom 객체를 훅에 전달하여 값을 가져오고 설정한다.

useRecoilValue	useRecoilState	useSetRecoilState
state	state, setState (useState와 비슷)	setState

 

 

Selector 

가공된 데이터를 받거나 데이터를 가공하여 저장하고 싶을 때

기능의 실행 (비동기 액션 가능)

 

---

 

 

현재 상황은 +버튼을 눌렀을 때 데이터 type이 구분되지 않아 (담당자/ 레이블) 동시에 내려오게 된다.

이는 현재 담당자의 내려온 상태 (isDropAsignee)로만 조건을 줘서이고,

<SideBarDropDiv ref={dropDownElement}>
            {isDropAsignee && (
              <SideBarDrop type={'담당자'} assigneeData={userList} />
            )}
          </SideBarDropDiv>
<SideBarDropDiv ref={dropDownElement}>
            {isDropAsignee && (
              <SideBarDrop type={'레이블'} labelData={labelList} />
            )}
</SideBarDropDiv>

이 세가지 사이드바의 DropDown을 관리할 방법은 크게 두가지 이다.

1) 3가지의 Dropdwon 상태를 따로 관리하기 

isDropAisgnee , isDropLabel, isDropMileston  

 

2)  3가지의 Dropdwon 상태를 객체로 관리하기 

atom에서 dropState를 객체로 관리한 후 

각 클릭 시 selecotr로 dropState를 변화시키는 법

 

--> Dropdown의 상태를 따로 관리하는 방법을 선택했다.

export const dropAssigneeState = atom({
  key: 'dropAssigneeState',
  default: false,
});
export const dropLabelState = atom({
  key: 'dropLabelState',
  default: false,
});
export const dropMilestoneState = atom({
  key: 'dropMilestoneState',
  default: false,
});

 

 

 

---

📌 Recoil 비동기  와 suspense

Error: IssueTable suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

 

 <React.Suspense fallback={null}>
        <IssueTable />
      </React.Suspense>

Recoil은 보류중인 데이터를 다루기 위해 React Suspense 와 함께 동작하도록 디자인되어있다고 한다. 컴포넌트를 Suspense 경계로 감싸서 아직 보류중인 하위 항복들을 잡아내고 대체하기 위한 UI를 렌더링 할 수 있다.

현재는 null값을 넣어놓았다.

 

참고 :https://recoiljs.org/ko/docs/guides/asynchronous-data-queries/

 

📌 지정 객체 type을  받아올 떄 

 

const IssueTableHeader = ({
  IssueData,
}: {
  IssueData: IssueDataProps;
}): JSX.Element => {

const IssueTableHeader = ({IssueData}: IssueDataProps}):

export interface IssueDataProps {
  
    issueId: number;
    milestoneInfo: {
      description: string;
      dueDate: string;
      title: string;
    };
    title: string;
    content: string;
    status: string;
    writer: AssigneeProps[];
    createdDateTime: string;
    assignees: AssigneeProps[];
    labels: LabelProps[];
  
}

 

 

Json 형태의 Type 설정

type의 형태가 json 객체 형태로 되어 있으면 타입 지정시 두가지로 설정할 수 있는데,

예시로 ProfileProps 가 이와 같이 생겼을 때 사용 시에는 

 

1) 사용 시 객체 할당

export interface nameProps {
    		first: string,
            last : string,
}

const ProfileComponent = ({name }: {name : ProfileProps}): JSX.Element => {

 

 

2) Type , interface 디테일하게 지정하기  

export interface nameProps {
	name:{
    		first: string,
            last : string,
         }
}

const ProfileComponent = ({name }: ProfileProps): JSX.Element => {

자유도가 더 높은 방법을 선택했다. 

 

 

📌 Typescript에서 날짜 계산 시 오류

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. TS2362

 

날짜계산을 할때 날짜끼리 연산할 때 타입스크립트에서느 명시를 해줘야 한다.

http://ccambo.github.io/Dev/Typescript/1.typescript-problem-solving-and-tips/

 

게시글 작성 시간 몇분 전으로 나타내는 함수

export const getElapsedTime = (date: string): string => {
  const createdTime = new Date(date);
  const current = new Date();
  const gapMin = Math.floor((+current - +createdTime) / 1000 / 60);

  if (gapMin < 1) return '방금 전';

  if (gapMin < 60) return `${gapMin}분 전`;

  const gapHour = Math.floor(gapMin / 60);
  if (gapHour < 24) return `${gapHour}시간 전`;

  const gapDay = Math.floor(gapHour / 24);
  if (gapDay < 30) return `${gapDay}일 전`;

  const gapMonth = Math.floor(gapDay / 12);
  if (gapMonth < 12) return `${gapMonth}달 전`;

  return '몇 년 전';
};

이렇게 util 함수에 넣어 몇 분 전에 작성되었습니다.