[DAY-53] React (6)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
Notion 클로닝 프로젝트를 계속 리팩토링 중이다.
지금은 API를 갈아끼웠다 😉
하지만 아직 https 설정을 못해 로컬에서만 확인 가능하다. 하하하..

Modal 창 외부를 클릭했을 때, 창이 꺼지는 기능을 Hook으로 구현할 수 있구나.
React 컴포넌트와 훅의 단위는 배울수록 신기하다..

고양이 사진첩 때 날 괴롭혔던(?) BreadCrumb를 컴포넌트 단위로 분리하고
내부에 있는 Item 또한 컴포넌트 단위로 분리하니 왜 진작에 이렇게 분리하지 못했을까 너무 편리했다.

기존에 Spacer를 실습하며 Flex, Grid 또한 컴포넌트로 만들어볼 수 있을 것 같다는 생각을 했었다.
오늘 Flux를 구현하며 궁금증이 풀렸다.
조금 더 공부 해봐야겠다. 아직 Context API를 많이 사용해보지 않아서일까, gutter 부분이 이해가 잘 가지 않는다.

[1] 컴포넌트 실습

Flux

Provider의 이해가 더 필요하다.

근데 의문점이 있다. Flux 디렉토리 내부에 Provider도 함께 존재한다.

Flux Component 내부에서만 사용하는 Provider는 같은 디렉토리에 묶어도 되는걸까?

아직 디렉토리 나누는 것에 익숙하지 않다.

스토리 파일이나 스타일 파일이 같은 디렉토리 내부에 있어야 한다는 의견이 반, 별도의 디렉토리에 있어야 한다는 의견이 반.

이건 나중에 팀 단위로 협업을 할 때 정하는 사항들일까?

// Row.js
import styled from "@emotion/styled";
import { useMemo } from "react";
import FluxProvider from "./FluxProvider";

const AlignToCssValue = {
  top: "flex-start",
  middle: "center",
  bottom: "flex-end",
};

const StyleRow = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;

  justify-content: ${({ justify }) => justify};
  align-items: ${({ align }) => AlignToCssValue[align]};
`;

const Row = ({ children, justify, align, gutter, ...props }) => {
  const gutterStyle = useMemo(() => {
    if (Array.isArray(gutter)) {
      const horizontalGutter = gutter[0];
      const verticalGutter = gutter[1];
      return {
        marginTop: `-${verticalGutter / 2}px`,
        marginBottom: `-${verticalGutter / 2}px`,
        marginLeft: `-${horizontalGutter / 2}px`,
        marginRight: `-${horizontalGutter / 2}px`,
      };
    }
    return {
      marginLeft: `-${gutter / 2}px`,
      marginRight: `-${gutter / 2}px`,
    };
  }, [gutter]);

  return (
    <FluxProvider gutter={gutter}>
      <StyleRow
        {...props}
        align={align}
        justify={justify}
        style={{ ...props.style, ...gutterStyle }}
      >
        {children}
      </StyleRow>
    </FluxProvider>
  );
};

export default Row;

// Col.js
import styled from "@emotion/styled";
import { useMemo } from "react";
import { useFlux } from "./FluxProvider";

const StyledCol = styled.div`
  max-width: 100%fit-content;
  box-sizing: border-box;

  width: ${({ span }) => span && `${(span / 12) * 100}%`};
  margin-left: ${({ offset }) => offset && `${(offset / 12) * 100}%`};
`;

const Col = ({ children, span, offset, ...props }) => {
  const { gutter } = useFlux();
  const gutterStyle = useMemo(() => {
    if (Array.isArray(gutter)) {
      const horizontalGutter = gutter[0];
      const verticalGutter = gutter[1];
      return {
        paddingTop: `${verticalGutter / 2}px`,
        paddingBottom: `${verticalGutter / 2}px`,
        paddingLeft: `${horizontalGutter / 2}px`,
        paddingRight: `${horizontalGutter / 2}px`,
      };
    }
    return {
      paddingLeft: `${gutter / 2}px`,
      paddingRight: `${gutter / 2}px`,
    };
  }, [gutter]);

  return (
    <StyledCol
      {...props}
      span={span}
      offset={offset}
      style={{ ...props.style, ...gutterStyle }}
    >
      {children}
    </StyledCol>
  );
};

export default Col;

// FluxProvider
import { createContext, useContext } from "react";

const FluxContext = createContext();
export const useFlux = () => useContext(FluxContext);

const FluxProvider = ({ children, gutter = 0 }) => {
  return (
    <FluxContext.Provider value={{ gutter }}>{children}</FluxContext.Provider>
  );
};

export default FluxProvider;

// index.js
import Row from "./Row";
import Col from "./Col";

const Flux = {
  Row,
  Col,
};

export default Flux;

// Flux.stories.js
import Flux from "../../components/_BasicComponent/Flux";

const { Row, Col } = Flux;

export default {
  title: "Component/Flux",
  component: Flux,
};

const Box = () => {
  return (
    <div
      style={{
        backgroundColor: "#44b",
        width: "100%",
        height: 18,
        color: "white",
        textAlign: "center",
        borderRadius: 8,
      }}
    >
      Box
    </div>
  );
};

export const Default = () => {
  return (
    <Row gutter={[2, 4]}>
      <Col span={4}>
        <Box />
      </Col>
      <Col span={4}>
        <Box />
      </Col>
      <Col span={4}>
        <Box />
      </Col>
      <Col span={2}>
        <Box />
      </Col>
      <Col span={8}>
        <Box />
      </Col>
      <Col span={2}>
        <Box />
      </Col>
    </Row>
  );
};

Breadcrumb

// BreadcrumbItem.js
import styled from "@emotion/styled";
import Text from "../Text";
import Icon from "../Icon";

const BreadcrumbItemContainer = styled.div`
  display: inline-flex;
  align-items: center;
`;

const Anchor = styled.a`
  color: inherit;
  text-decoration: none;
`;

const BreadcrumbItem = ({ children, href, active, __TYPE, ...props }) => {
  return (
    <BreadcrumbItemContainer {...props}>
      <Anchor href={href}>
        <Text size={14} strong={active}>
          {children}
        </Text>
      </Anchor>
      {!active && <Icon name="chevron-right" size={22} strokeWidth={1} />}
    </BreadcrumbItemContainer>
  );
};

BreadcrumbItem.defaultProps = {
  __TYPE: "Breadcrumb.Item",
};

BreadcrumbItem.propTypes = {
  __TYPE: "Breadcrumb.Item",
};

export default BreadcrumbItem;

// index.js
import styled from "@emotion/styled";
import React from "react";
import BreadcrumbItem from "./BreadcrumbItem";

const BreadcrumbContainer = styled.nav`
  display: inline-block;
`;

const Breadcrumb = ({ children, ...props }) => {
  const items = React.Children.toArray(children)
    .filter((element) => {
      if (
        React.isValidElement(element) &&
        element.props.__TYPE === "Breadcrumb.Item"
      ) {
        return true;
      }

      console.warn("Only accepts Breadcrumb.Item as it's children.");
      return false;
    })
    .map((element, index, elements) => {
      return React.cloneElement(element, {
        ...element.props,
        active: index === elements.length - 1,
      });
    });

  return <BreadcrumbContainer>{items}</BreadcrumbContainer>;
};

Breadcrumb.Item = BreadcrumbItem;

export default Breadcrumb;

// Breadcrumb.stories.js
import Breadcrumb from "../../components/_BasicComponent/Breadcrumb";

export default {
  title: "Component/Breadcrumb",
  component: Breadcrumb,
};

export const Default = () => {
  return (
    <Breadcrumb>
      <Breadcrumb.Item>Home</Breadcrumb.Item>
      <Breadcrumb.Item>item1</Breadcrumb.Item>
      <Breadcrumb.Item>item2</Breadcrumb.Item>
      <Breadcrumb.Item>item3</Breadcrumb.Item>
    </Breadcrumb>
  );
};

Tab

// TabItem.js
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import Text from "../Text";

const TabItemWrapper = styled.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 60px;
  background-color: ${({ active }) => (active ? "#ddf" : "#eee")};
  cursor: pointer;
`;

const TabItem = ({ title, index, active, onCLick, ...props }) => {
  return (
    <TabItemWrapper active={active} {...props}>
      <Text strong={active}>{title}</Text>
    </TabItemWrapper>
  );
};

TabItem.defaultProps = {
  __TYPE: "Tab.Item",
};

TabItem.propTypes = {
  __TYPE: PropTypes.oneOf(["Tab.Item"]),
};

export default TabItem;

// index.js
import styled from "@emotion/styled";
import React, { useMemo, useState } from "react";
import TabItem from "./TabItem";

const childrenToArray = (children, types) => {
  return React.Children.toArray(children).filter((element) => {
    if (React.isValidElement(element) && types.includes(element.props.__TYPE)) {
      return true;
    }

    console.warn(
      `Only accepts ${Array.isArray(types) ? types.join(", ") : types}
			 as it's children.`
    );

    return false;
  });
};

const TabItemContainer = styled.div`
  border: 2px solid #ddd;
  background-color: #eee;
`;

const Tab = ({ children, active, ...props }) => {
  const [currentActive, setCurrentActive] = useState(() => {
    if (active) return active;
    else {
      const index = childrenToArray(children, "Tab.Item")[0].props.index;
      return index;
    }
  });

  const items = useMemo(() => {
    return childrenToArray(children, "Tab.Item").map((element) => {
      return React.cloneElement(element, {
        ...element.props,
        key: element.props.index,
        active: element.props.index === currentActive,
        onClick: () => {
          setCurrentActive(element.props.index);
        },
      });
    });
  }, [children, currentActive]);

  const activeItem = useMemo(
    () => items.find((element) => currentActive === element.props.index),
    [currentActive, items]
  );

  return (
    <div>
      <TabItemContainer>{items}</TabItemContainer>
      <div>{activeItem.props.children}</div>
    </div>
  );
};

Tab.Item = TabItem;

export default Tab;

[2] 사용자 정의 Hook 실습

사용자 정의 훅도 storybook에서 바로 확인할 수 있다는 것을 오늘 처음 알았다.

스토리북은,, 컴포넌트의 구조, 단위를 확인하기 위해 사용할 수 있다는 약간의 고정관념이 있었던 것 같다.

useHover

// useHover.js
import { useCallback, useEffect, useState, useRef } from "react";

const useHover = () => {
  const [state, setState] = useState(false);
  const ref = useRef(null);

  const handleMouseOver = useCallback(() => setState(true), []);
  const handleMouseOut = useCallback(() => setState(false), []);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    element.addEventListener("mouseover", handleMouseOver);
    element.addEventListener("mouseout", handleMouseOut);

    return () => {
      element.removeEventListener("mouseover", handleMouseOver);
      element.removeEventListener("mouseout", handleMouseOut);
    };
  }, [ref, handleMouseOver, handleMouseOut]);

  return [ref, state];
};

export default useHover;

// useHover.stories.js
import styled from "@emotion/styled";
import useHover from "../../hooks/useHover";

export default {
  title: "Hook/useHover",
};

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: tomato;
`;

export const Default = () => {
  const [ref, hover] = useHover();

  return (
    <>
      <Box ref={ref} />
      {hover ? <div>HOVER</div> : ""}
    </>
  );
};

useScroll

// useScroll.js
import { useEffect, useRef } from "react";
import useRafState from "./useRafState";

const useScroll = () => {
  const [state, setState] = useRafState({ x: 0, y: 0 });
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const handleScroll = () => {
      setState({
        x: ref.current.scrollLeft,
        y: ref.current.scrollTop,
      });
    };

    element.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      element.removeEventListener("scroll", handleScroll);
    };
  }, [ref]);

  return [ref, state];
};

export default useScroll;

// useScroll.stories.js
import styled from "@emotion/styled";
import useScroll from "../../hooks/useScroll";

export default {
  title: "Hook/useScroll",
};

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
  overflow: auto;
`;

const Inner = styled.div`
  width: 10000px;
  height: 10000px;
  background-image: linear-gradient(180deg, #000 0%, #fff 100%);
`;

export const Default = () => {
  const [ref, coord] = useScroll();
  return (
    <>
      <Box ref={ref}>
        <Inner />
      </Box>
      <button
        onClick={() => {
          ref.current.scrollTo({ top: 20000, left: 20000, behavior: "smooth" });
        }}
      >
        Scroll
      </button>
      {coord.x}, {coord.y}
    </>
  );
};

useKey, useKeyPress

• useKey

// useKey.js
import { useCallback, useEffect } from "react";

const useKey = (event = "keydown", targetKey, handler) => {
  const handleKey = useCallback(
    ({ key }) => {
      if (key === targetKey) {
        handler();
      }
    },
    [targetKey, handler]
  );

  useEffect(() => {
    window.addEventListener(event, handleKey);

    return () => {
      window.removeEventListener(event, handleKey);
    };
  }, [event, targetKey, handleKey]);
};

export default useKey;

// useKey.stories.js
import useKey from "../../hooks/useKey";

export default {
  title: "Hook/useKey",
};

export const Default = () => {
  useKey("keydown", "f", () => {
    alert("f keydown Event!");
  });

  useKey("keyup", "q", () => {
    alert("q keyup Event!");
  });
  return <>useKey</>;
};

• useKeyPress

import { useCallback, useEffect, useState } from "react";

const useKeyPress = (targetKey) => {
  const [keyPressed, setKeyPressed] = useState(false);

  const handleKeyDown = useCallback(
    ({ key }) => {
      if (key === targetKey) {
        setKeyPressed(true);
      }
    },
    [targetKey]
  );

  const handleKeyUp = useCallback(
    ({ key }) => {
      if (key === targetKey) {
        setKeyPressed(false);
      }
    },
    [targetKey]
  );

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, [handleKeyDown, handleKeyUp]);

  return keyPressed;
};

export default useKeyPress;

import useKeyPress from "../../hooks/useKeyPress";

export default {
  title: "Hook/useKeyPress",
};

export const Default = () => {
  const pressed = useKeyPress("?");
  return <>{pressed ? "Peeo-A-Bool" : "Press ? Key"}</>;
};

useClickAway

// useClickAway.js
import { useEffect, useRef } from "react";

const events = ["mousedown", "touchstart"];

const useClickAway = (handler) => {
  const ref = useRef(null);
  const savedHandler = useRef(handler);
  // 최적화를 위해 useRef를 사용할 수 있다.
  // 이벤트가 변경될 경우 전체가 재렌더링 되는 성능 저하 요인을 해결한다.

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const handleEvent = (e) => {
      !element.contains(e.target) && savedHandler.current(e);
    };

    for (const eventName of events) {
      document.addEventListener(eventName, handleEvent);
    }

    return () => {
      for (const eventName of events) {
        document.removeEventListener(eventName, handleEvent);
      }
    };
  }, [ref]);

  return ref;
};

export default useClickAway;

// useClickAway.stories.js
import { useState } from "react";
import styled from "@emotion/styled";
import useClickAway from "../../hooks/useClickAway";

export default {
  title: "Hook/useClickAway",
};

const Popover = styled.div`
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background-color: #44d;
`;

export const Default = () => {
  const [show, setShow] = useState(false);
  const ref = useClickAway((e) => {
    if (e.target.tagName !== "BUTTON") setShow(false);
  });

  return (
    <div>
      <button onClick={() => setShow(true)}>Show</button>
      <Popover ref={ref} style={{ display: show ? "block" : "none" }}>
        Popover
      </Popover>
    </div>
  );
};

---

출처

프로그래머스