[React] 22.07.13 회고록

 

어제의 삽질이 헛된 것은 아니었다.

useEffect를 사용하여 atom의 값을 변경한 후 api를 요청하는 파라미터로 사용하는 것. 백문이 불여일견이라했다.

function PopUpOtherProfile({ targetId }: PopUpOthProfProps): JSX.Element {
  const [openModal, setOpenModal] = useState(false);
  const setUserIdInfo = useSetRecoilState(userIdInfoAtom);
  const setReqUserInfo = useSetRecoilState(reqUserInfo);

  useEffect(
    () => setUserIdInfo(targetId.toString()),
    [targetId, setUserIdInfo],
  );

  const targetInfo = useRecoilValue<IUserInfo>(getOtherUserInfoSel);
  const targetRecords = useRecoilValue<IRecord[]>(getOtherRecordSel);

  const myFriends = useRecoilValue<IFriend[]>(getFriend);
  const isFriend = myFriends.findIndex(
    (myFriend) => myFriend.userId === targetId,
  );
  console.log("my friends  = ", isFriend);

  const myBlocks = useRecoilValue<IBlock[]>(getBlockSelector);
  const isBlocked = myBlocks.findIndex(
    (myBlock) => myBlock.userId === targetId,
  );

  console.log("my block = ", isBlocked);

  const handleOptionChange = (val: boolean) => {
    setOpenModal(!val);
  };

 

import { reqUserInfo } from "./getUserInfo";
import { atom, selector } from "recoil";
import { getApi } from "../api/getApi";

export const userIdInfoAtom = atom({
  key: "userId/info",
  default: "",
});

export const getOtherUserInfoSel = selector({
  key: "user/info/id/get",
  get: async ({ get }) => {
    get(reqUserInfo);
    const userId = get(userIdInfoAtom);
    console.log("other profile user id = ", userId);
    return await getApi(`user/info/${userId}`).catch((err) => console.log(err));
  },
});

어제 사용했던 것을 생각해보니 또 사용해도 될 것 같아서 그대로 사용했다. selectorFamily라는 것을 듣기는 했지만 역시나 한번 사용했던 것이 편하고 또 핑계를 대보자면 새로운 걸 사용해서 만약 오류가 난다면 또 수많은 시간의 삽질을 할 것이기에... 늘 먹던걸로 최신의 안정적인 버전(latest-stable-version)은 농담이고 아무튼 되는 걸 고대로 사용했다.

 

 

삼항에

삼항에

삼항에

삼항에

삼항

 

import React from "react";

interface BtnProps {
  tag: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  nickDeactivate?: boolean; // nickname's submit button
  myProfile?: boolean; // profile's 4 button
  isFriend?: boolean; // other profile's add friend button
  isBlocked?: boolean; // other profile's add blocklist button
}

function BtnPopUp({
  tag,
  onClick,
  nickDeactivate,
  myProfile,
  isFriend,
  isBlocked,
}: BtnProps): JSX.Element {
  return (
    <>
      {myProfile ? (
        <button
          className={`bg-button rounded text-white font-main w-[200px] h-[40px] tracking-widest ${
            myProfile ? "opacity-25" : ""
          }`}
          onClick={onClick}
          disabled={myProfile ? true : false}
        >
          {tag}
        </button>
      ) : isFriend ? (
        <button
          className={`bg-button rounded text-white font-main w-[200px] h-[40px] tracking-widest ${
            isFriend ? "opacity-25" : ""
          }`}
          onClick={onClick}
          disabled={isFriend ? true : false}
        >
          {tag}
        </button>
      ) : isBlocked ? (
        <button
          className={`bg-button rounded text-white font-main w-[200px] h-[40px] tracking-widest ${
            isBlocked ? "opacity-25" : ""
          }`}
          onClick={onClick}
          disabled={isBlocked ? true : false}
        >
          {tag}
        </button>
      ) : nickDeactivate ? (
        <button
          className={`bg-button rounded text-white font-main w-[200px] h-[40px] tracking-widest ${
            nickDeactivate ? "opacity-25" : ""
          }`}
          onClick={onClick}
          disabled={nickDeactivate ? true : false}
        >
          {tag}
        </button>
      ) : (
        <button
          className={`bg-button rounded text-white font-main w-[200px] h-[40px] tracking-widest`}
          onClick={onClick}
        >
          {tag}
        </button>
      )}
    </>
  );
}

export default BtnPopUp;

처음에는 삼항안에 삼항안에 삼항 이런 코드를 사용하지 않으려 했다. 그런데 버튼 컴포넌트를 공유해서 사용하다보니 각각 다른 상황에 다른 기능, 때로는 버튼 비활성화가 필요한 상황이다 보니 삼항연산자를 중첩해서 사용하게 되었다. 처음엔 이걸 어떻게 알아보지 했는데 다른블로그의 글에서 삼항안에 삼항은 결국 if, else if, else 와 같다고 한다. 그 말을 듣고 다시 한번 보니 꽤 이해할만 한 것 같아서 혼자 만족하는 중이다. 버튼이 다 제각각의 기능도 하고 비활성화 되어야 할땐 비활성화되고 그런다.

 

어제의 삽질 덕분인지 오늘은 버튼들의 기능들을 빠른 시간안에 다수 구현할 수 있었고 그래서 기분이 좋다. 그래서 오늘은 이른 시간이지만 코드짜는 것을 그만하고 socket 통신 하는 부분을 공부하려고 한다. 물론 오늘의 회고록엔 포함되지 않을듯!! 저녁에 밥먹으러 갔다가 집에 갈거니께~~