kwoncharles

// 일반 filter
const dogs = filterDogs(animals)

// 제어역전 filter
const dogs = animals.filter(animal => animal.species === 'dog')

kwoncharles

// 자이언트 컴포넌트
<Dialog
  iconAboveTitle="fancy-icon"
  title="안내"
  description="이것은 멋진 내용을 담고 있는 안내입니다."
  buttonPosition="bottom"
  buttonAlign="vertical"
  buttons={[{
    label: '확인',
    onClick: doSomething,

kwoncharles

Dialog.Content = ({ title, description }) => (
  <React.Fragment>
    <Dialog.Title>
      {title}
    </Dialog.Title>
    <Dialog.Description>
      {description}
    </Dialog.Description>
  </React.Fragment>
)

kwoncharles

function Page() {
  return (
    <Dialog>
      <Dialog.Title>
        안내
      </Dialog.Title>
      <Dialog.Description>
        이것은 멋진 내용을 담고 있는 안내입니다.
      </Dialog.Description>
      <Dialog.ButtonContainer align="vertical">

kwoncharles

/* 컴포넌트 탄생! 깔끔하다 ✨ */
<Dialog
  title="안내"
  description="이것은 멋진 내용을 담고 있는 안내입니다."
  button={{
    label: '확인',
    onClick: doSomething,
  }}
/>

kwoncharles

import { BodyProvider } from './BodyContext'

function App() {
  return (
    <BodyProvider>
      <Routes />
    </BodyProvider>
  )
}

kwoncharles

// useDocumentOverflow.ts
import { useEffect } from 'react';

const defaultOverflow: string = 'auto';

function useDocumentOverflow(property: 'hidden' | 'scroll' | 'auto') {
  useEffect(() => {
    const bodyElement: HTMLBodyElement = document.getElementsByTagName('body')[0];
    const previousOverflow: string = bodyElement.style.overflow || defaultOverflow;
    bodyElement.style.overflow = property;

kwoncharles

function SomeComponent() {
  const [value, onChangeInputValue, isValid] = useInput({
    type: 'number',
    maxValue: 10000,
    autoFix: false,
  });
  const onSubmit = () => {
    if (isValid) {
      submitValue(value);
    } else {

kwoncharles

import { useState, useCallback } from 'react';

export interface DropdownBundle<T> {
  isOpen: boolean;
  selectedValue: T;
  onClickDropdown: () => void;
  onClickOption: (v: T) => void;
  onRequestClose: () => void;
}

kwoncharles

import { useState, useCallback } from 'react';

type returnType = [CheckItem[], (label: string) => void, () => void];

function useCheckList(checkList: CheckItem[]): returnType {
  const [list, setList] = useState(checkList);

  const onCheckItem = useCallback((label: string) => {
    setList(prevList => prevList.map(item => {
      if (label === item.label) {