[DAY-51] React (4)

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

오늘의 소감은?
Vuex와 비슷한 Context API..
이 친구도 헷갈리는데 Redux 어떡하지..? 헤헤

[1] Context API

Component는 트리 구조로 이루어져 있습니다.

개발을 진행하다보면 트리 레벨이 깊어지는 경우가 많습니다.

따라서 props를 넘겨줄 때 트리를 계속 타고 넘어가야 하는 Prop Drilling 현상이 발생합니다.

이를 해결하기 위한 도구 중 하나가 Context API입니다. (전역 상태 관리)

Context Provider로 데이터를 관리하고, Context Consumer로 데이터를 주고 받아 사용합니다.

import { createContext, useContext } from "react";

const TaskContext = createContext();
export const useTasks = () => useContext(TaskContext);

해당 Context를 React.createContext로 만들어 사용합니다.

const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useLocalStorage("TASKS", []);

  const addTask = (content) => {
    setTasks([
      ...tasks,
      {
        id: v4(),
        content,
        complete: false,
      },
    ]);
  };

  const updateTask = (id, status) => {
    setTasks(
      tasks.map((item) =>
        item.id === id ? { ...item, complete: status } : item
      )
    );
  };

  const removeTask = (id) => {
    setTasks(tasks.filter((item) => item.id !== id));
  };

  return (
    <TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
      {children}
    </TaskContext.Provider>
    // Context의 변화를 알리는 역할을 합니다.
    // value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다.
  );
};

export default TaskProvider;

생성한 TaskContext에서 사용할 Provider의 내용을 Component형식으로 return해 사용합니다.

// Task.js 일부
const { updateTask, removeTask } = useTasks();

함수 또는 값을 꺼내서 사용할 수 있습니다.

또한 다음과 같은 형태로 context 값을 지켜보는 컴포넌트를 만들 수 있습니다.

<TaskContext.Consumer>{value}</TaskContext.Consumer>

[1-1] 특징

Context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 것 입니다.

따라서 해당 용도가 꼭 필요할 때만 Context를 사용하는 것이 좋습니다.

왜냐하면 Context를 사용하면 컴포넌트를 재사용하기가 어려워집니다.

Context consumer로 데이터를 사용하는 모든 컴포넌트들은, Provider로 조작되는 데이터가 변경될 경우 전부 재렌더링 되기 때문입니다.

이 경우, Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트들이 다시 렌더링됩니다.

[2] 컴포넌트 실습

• Upload

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

const UploadContainer = styled.div`
  display: inline-block;
  cursor: pointer;
`;

const Input = styled.input`
  display: none;
`;

const Upload = ({
  children,
  droppable,
  name,
  accept,
  value,
  onChange,
  ...props
}) => {
  const [file, setFile] = useState(value);
  const [dragging, setDragging] = useState(false);
  const inputRef = useRef(null);

  const handleFileChange = (e) => {
    const files = e.target.files;
    const changedFile = files[0];
    setFile(changedFile);
    onChange && onChange(changedFile);
  };

  const handleChooseFile = () => {
    inputRef.current.click();
  };

  const handleDragEnter = (e) => {
    if (!droppable) return;

    e.preventDefault();
    e.stopPropagation();

    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setDragging(true);
    }
  };

  const handleDragLeave = (e) => {
    if (!droppable) return;

    e.preventDefault();
    e.stopPropagation();

    setDragging(false);
  };

  const handleDragOver = (e) => {
    if (!droppable) return;

    e.preventDefault();
    e.stopPropagation();
  };

  const handleFileDrop = (e) => {
    if (!droppable) return;

    e.preventDefault();
    e.stopPropagation();

    const files = e.dataTransfer.files;
    const changedFile = files[0];
    setFile(changedFile);
    onChange && onChange(changedFile);
    setDragging(false);
  };

  return (
    <UploadContainer
      onClick={handleChooseFile}
      onDrop={handleFileDrop}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      {...props}
    >
      <Input
        ref={inputRef}
        type="file"
        name={name}
        accept={accept}
        onChange={handleFileChange}
      />
      {typeof children === "function" ? children(file, dragging) : children}
    </UploadContainer>
  );
};

export default Upload;

// Upload.stories.js
import Upload from ".";

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

export const Default = () => {
  return (
    <Upload>
      <button>Upload!</button>
    </Upload>
  );
};

export const AccessFile = () => {
  return (
    <Upload>
      {(file) => <button>{file ? file.name : "CLICK ME"}</button>}
    </Upload>
  );
};

export const Droppable = () => {
  return (
    <Upload droppable>
      {(file, dragging) => (
        <div
          style={{
            width: 300,
            height: 100,
            border: "4px dashed #aaa",
            borderColor: dragging ? "black" : "#aaa",
          }}
        >
          {file ? file.name : "Click or drag file to this area to upload"}
        </div>
      )}
    </Upload>
  );
};

• Badge

// index.js
import styled from "@emotion/styled";

const BadgeContainer = styled.div`
  position: relative;
  display: inline-block;
`;

const Super = styled.sup`
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 20px;
  color: white;
  background-color: tomato;
  transform: translate(50%, -50%);

  &.dot {
    padding: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
`;

const Bedge = ({
  children,
  count,
  maxCount,
  showZero,
  dot = false,
  backgroundColor,
  textColor,
  ...props
}) => {
  const colorStyle = {
    backgroundColor,
    color: textColor,
  };

  let badge = null;
  if (count) {
    badge = (
      <Super style={colorStyle}>
        {maxCount && count > maxCount ? `${maxCount}+` : count}
      </Super>
    );
  } else {
    if (count !== undefined) {
      badge = showZero ? <Super style={colorStyle}>0</Super> : null;
    } else if (dot) {
      badge = <Super style={colorStyle} className="dot"></Super>;
    }
  }

  return (
    <BadgeContainer {...props}>
      {children}
      {badge}
    </BadgeContainer>
  );
};

export default Bedge;

// Badge.stories.js
import Bedge from ".";
import Image from "../Image";

export default {
  title: "Component/Bedge",
  component: Bedge,
  argTypes: {
    count: {
      defaultValue: 10,
      control: "number",
    },
    maxCount: {
      defaultValue: 100,
      control: "number",
    },
    backgroundColor: { control: "color" },
    textColor: { control: "color" },
    showZero: {
      defaultValue: false,
      control: "boolean",
    },
  },
};

export const Default = (args) => {
  return (
    <Bedge {...args}>
      <Image
        src="https://picsum.photos/60"
        width={60}
        style={{ borderRadius: 0 }}
      />
    </Bedge>
  );
};

export const Dot = () => {
  return (
    <Bedge dot>
      <Image
        src="https://picsum.photos/60"
        width={40}
        style={{ borderRadius: 0 }}
      />
    </Bedge>
  );
};

• Icon

// index.js
import styled from "@emotion/styled";
import { Buffer } from "buffer";

const IconWrapper = styled.i`
  display: inline-block;
`;

const Icon = ({
  name,
  size = 16,
  strokeWidth = 2,
  rotate,
  color = "#222",
  ...props
}) => {
  const shapeStyle = {
    width: size,
    height: size,
    transform: rotate ? `rotate(${rotate}deg)` : undefined,
  };
  const iconStyle = {
    "stroke-width": strokeWidth,
    stroke: color,
    width: size,
    height: size,
  };
  const icon = require("feather-icons").icons[name];
  const svg = icon ? icon.toSvg(iconStyle) : "";
  const base64 = Buffer.from(svg, "utf8").toString("base64");

  return (
    <IconWrapper {...props} style={shapeStyle}>
      <img src={`data:image/svg+xml;base64,${base64}`} alt={name} />
    </IconWrapper>
  );
};

export default Icon;

import Icon from ".";

export default {
  title: "Component/Icon",
  component: Icon,
  argTypes: {
    name: { defaultValue: "box", control: "text" },
    size: { defaultValue: 16, control: { type: "range", min: 16, max: 80 } },
    strokeWidth: {
      defaultValue: 2,
      control: { type: "range", min: 2, max: 6 },
    },
    color: {
      defaultValue: "#222",
      control: "color",
    },
    rotate: { defaultValue: 0, control: { type: "range", min: 0, max: 360 } },
  },
};

export const Default = (args) => {
  return <Icon {...args} />;
};

---

출처

프로그래머스

https://ko.reactjs.org/docs/context.html