import useFormValidation from '../hooks/useFormValidation'
 
function Signin() {
  const {
    formData,
    isDisabled,
    handleEmailChange,
    handlePasswordChange,
    handleSubmitSignin
  } = useFormValidation()
 
  return (
    <form onSubmit={handleSubmitSignin}>
      <label>
        이메일
        <input
          data-testid="email-input"
          value={formData.email}
          onChange={handleEmailChange}
        />
      </label>
 
      <label>
        비밀번호
        <input
          data-testid="password-input"
          value={formData.password}
          onChange={handlePasswordChange}
        />
      </label>
 
      <button data-testid="signin-button" disabled={isDisabled} type="submit">
        로그인
      </button>
    </form>
  )
}
 
export default Signin
 

import useFormValidation from '../hooks/useFormValidation'
 
function Signup() {
  const {
    formData,
    isDisabled,
    handleEmailChange,
    handlePasswordChange,
    handleSubmitSignup
  } = useFormValidation()
 
  return (
    <form onSubmit={handleSubmitSignup}>
      <label>
        이메일
        <input
          data-testid="email-input"
          value={formData.email}
          onChange={handleEmailChange}
        />
      </label>
 
      <label>
        비밀번호
        <input
          data-testid="password-input"
          value={formData.password}
          onChange={handlePasswordChange}
        />
      </label>
 
      <button data-testid="signup-button" disabled={isDisabled} type="submit">
        회원가입
      </button>
    </form>
  )
}
 
export default Signup

import { useState } from 'react'
import Presentational from './Presentational'
import { signupAPI, signinAPI } from '../apis/auth'
import { FormData } from '../types'
 
interface Props {
  type: 'signIn' | 'signUp'
}
 
function Container({ type }: Props) {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: ''
  })
 
  const isDisabled = !!(
    formData.password.length < 8 || formData.email.indexOf('@') === -1
  )
 
  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const dataset = event.target.dataset['testid']
    const target = dataset?.split('-')[0]
    if (target === 'email' || target === 'password') {
      setFormData({ ...formData, [target]: event.target.value })
    }
  }
  const handleOnSubmit = async (
    event: React.FormEvent<HTMLFormElement>,
    type: 'signIn' | 'signUp'
  ) => {
    event.preventDefault()
    type === 'signIn'
      ? await signinAPI({ email: formData.email, password: formData.password })
      : await signupAPI({ email: formData.email, password: formData.password })
  }
 
  return (
    <Presentational
      type={type}
      formData={formData}
      isDisabled={isDisabled}
      handleOnChange={handleOnChange}
      handleOnSubmit={handleOnSubmit}
    />
  )
}
 
export default Container

function Presentational({
  type,
  handleOnSubmit,
  formData,
  handleOnChange,
  isDisabled
}: any) {
  return (
    <form onSubmit={e => handleOnSubmit(e, type)}>
      <label>
        이메일
        <input
          data-testid="email-input"
          value={formData.email}
          onChange={handleOnChange}
        />
      </label>
 
      <label>
        비밀번호
        <input
          data-testid="password-input"
          value={formData.password}
          onChange={handleOnChange}
        />
      </label>
 
      {type === 'signIn' ? (
        <button data-testid="signin-button" disabled={isDisabled} type="submit">
          로그인
        </button>
      ) : (
        <button data-testid="signup-button" disabled={isDisabled} type="submit">
          회원가입
        </button>
      )}
    </form>
  )
}
 
export default Presentational

const Search = () => {
  const {
    onSubmitHandler,
    onChangeHanlder,
    onKeyDownHandler,
    searchState,
    focusedItem,
    searchItemCnt,
    onMouseDownHandler
  } = useSearch()
	// 이런 식으로 하나의 UI 컴포넌트에 그에 상응하는 Custom Hook을 두어 로직을 숨기기에 급급했다.
 
  return (
		UI...
  )
}

const Search = () => {
  // 여러개의 재사용 가능한 Custom Hook으로 쪼갰다.
  // 후술할 Context API + useReducer의 구조가 더해지면 더 깔끔하고 분리가 잘 된 코드를 작성할 수 있다.
  const [searchInput, setSearchInput] = useState('')
  const { ref, isFocus, onFocusHandler } = useClickOutside()
  const { cachedData, fetchCached, fetchDebounced } = useCache(SEARCH_STORAGE)
  const { focusIndex, searchItemCnt, onKeyDownHandler } = useKeyboard({
    onEnter() {
      let autoSearch
      if (searchInput.length === 0) {
        if (focusIndex === -1) {
          alert('값을 입력해주세요')
          return
        }
        autoSearch = getRecentKeywords()[focusIndex]
      } else {
        autoSearch = cachedData[focusIndex - 1]?.name
      }
      setSearchInput(autoSearch === undefined ? '' : autoSearch)
      fetchCached(autoSearch, true)
    }
  })
    
    return (
    	UI...
    )
  }
 

// 비즈니스 로직과 UI가 혼재되어 있는 컴포넌트
const ActiveUsersList = () => {
  const [users, setUsers] = useState([]);
 
  useEffect(() => {
    const loadUsers = async () => {
      const response = await fetch("/some-api");
      const data = await response.json();
      setUsers(data);
    };
 
    loadUsers();
  }, []);
 
  const weekAgo = new Date();
  weekAgo.setDate(weekAgo.getDate() - 7);
 
  return (
    <ul>
      {users
        .filter((user) => !user.isBanned && user.lastActivityAt >= weekAgo)
        .map((user) => (
          <li key={user.id}>
            <img src={user.avatarUrl} />
            <p>{user.fullName}</p>
            <small>{user.role}</small>
          </li>
        ))}
    </ul>
  );
};

// useUsers hook으로 state, effect 관련 로직을 처리
// 그럼에도 짧고 간단한 비즈니스 로직이 컴포넌트에 잔존한다.
// 이를 useActiveUsers hook으로 한 번 더 감싸서
// 최종적으로 렌더링에 필요한 상태만 주입받아 사용하라
const useActiveUsers = () => {
  const { users } = useUsers();
 
  const activeUsers = useMemo(() => {
    return getOnlyActive(users);
  }, [users]);
 
  return { activeUsers };
};
 
const ActiveUsersList = () => {
  const { activeUsers } = useActiveUsers();
 
  return (
    <ul>
      {activeUsers.map((user) => (
        <UserItem key={user.id} user={user} />
      ))}
    </ul>
  );
};

// <Header> 컴포넌트를 다른 곳에서 조금씩 변형하여 재사용해야 하는 상황.
// 만약 <Header> 컴포넌트를 직접적으로 수정하면,
// <Header>를 재사용하는 상황이 많아질수록 <Header>는 취약해지고 결합도가 높아진다.
const Header = () => {
  const { pathname } = useRouter();
 
  return (
    <header>
      <Logo />
      <Actions>
        {pathname === "/dashboard" && (
          <Link to="/events/new">Create event</Link>
        )}
        {pathname === "/" && <Link to="/dashboard">Go to dashboard</Link>}
      </Actions>
    </header>
  );
};
 
const HomePage = () => (
  <>
    <Header />
    <OtherHomeStuff />
  </>
);
 
const DashboardPage = () => (
  <>
    <Header />
    <OtherDashboardStuff />
  </>
);

// 컴포넌트 함성을 이용하여 <Header>를 재사용해야하는 컴포넌트에게 책임을 전가하라.
const Header = ({ children }) => (
  <header>
    <Logo />
    <Actions>{children}</Actions>
  </header>
);
 
const HomePage = () => (
  <>
    <Header>
      <Link to="/dashboard">Go to dashboard</Link>
    </Header>
    <OtherHomeStuff />
  </>
);
 
const DashboardPage = () => (
  <>
    <Header>
      <Link to="/events/new">Create event</Link>
    </Header>
    <OtherDashboardStuff />
  </>
);

function SearchInput({prop1, prop2, ...rest}) {
 
  return (
   <input /> 
    {...rest}
   )
}

// 이 코드는 <LoginForm> 컴포넌트가 API 모듈(구체)에 의존하고 있다.
import api from "~/common/api";
 
const LoginForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const handleSubmit = async (evt) => {
    evt.preventDefault();
    await api.login(email, password);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Log in</button>
    </form>
  );
};
-------------
// API 모듈과의 직접적인 의존을 끊고 onSubmit props로 필요한 기능을 주입 및 추상화.
// 이제 LoginForm 컴포넌트는 api 모듈에 직접적으로 의존하지 않는다.
// LoginForm 컴포넌트는 추상에 의존하고 있다. 이 컴포넌트의 구체에 대한 책임은 상위 컴포넌트로 넘어간다.
type Props = {
  onSubmit: (email: string, password: string) => Promise<void>;
};
 
const LoginForm = ({ onSubmit }: Props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const handleSubmit = async (evt) => {
    evt.preventDefault();
    await onSubmit(email, password);
  };
 
	return UI
}

// <ConnectedLoginForm> 컴포넌트는 api와 LoginForm 사이의 접착제 역할.
// 복잡한 의존도 없고 서로 완전히 독립적이어서 반복적인 테스트 가능.
// LoginForm과 api가 모두 합의된 공통 추상(type Props)을 준수하는 한 안전하게 동작함
// HOC(고차 컴포넌트), Presentational - Container 패턴과 유사
import api from "~/common/api";
 
const ConnectedLoginForm = () => {
  const handleSubmit = async (email, password) => {
    await api.login(email, password);
  };
 
  return <LoginForm onSubmit={handleSubmit} />;
};