Hook의 규칙

1. Hook은 무조건 최상위 레벨에서만 호출해야 한다.

- 리액트의 컴포넌트를 말함
- 반복, 조건문, 함수에서 호출하면 안된다

Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다
그래야 리액트가 다수의 usestate hook과 useEffect hook에 호출해서
컴포넌트의 state를 올바르게 관리할 수 있다

function MyComponent(props) {
  const [name, setName] = useState('Ferrari');
 
  if (name != '') {
    useEffect(() => {
      ...
    });
  }    
  
  ...
}      

- 위의 코드에서 if문 안에 useEffect()함수를 넣었다
- name이 공백일 경우 useEffect()함수는 실행이 안된다
- 렌더링 될때마다 조건에 따라 useEffect()함수가
  실행 되었다가 안되었다가 하는 것은
  순서가 매번 달라져, 잘못 설계한 것이다

2. 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

- 일반 자바스크립트에서 Hook을 호출해서는 안된다

Hook 개발에 도움이 되는 플러그인
eslint-plugin-react-hooks

useMemo()에서 의존성 배열에 넣은 변수들은 create함수의 파라미터(인자)로 전달되지 않는다
하지만 useMemo()의 기능이 의존성 배열에 값이 변경되면 create함수를 재정의 하는 것임으로
create함수에서 참조하는 모든 변수를 의존성 배열과 맞출 필요가 있다
(나중에는 컴파일러가 자동으로 해줄 것이다)

https://www.npmjs.com/package/eslint-plugin-react-hooks

혹시 설치에 실패해서 서버 설정이 이상해지면 리액트 앱을 재설치 바람
수업 따라서 만들었던 index.js/css 및 scr에 있는 파일들은 백업 바람

npm uninstall -g create-react-app (리액트 앱 제거)
npm install -g create-react-app (리액트 앱 재설치)
npx create-react-app app-name (리액트 앱 실행)

#Custom Hook 만들기

- 반복적인 로직을 Hook으로 만들어 사용하가 위함
- 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

1. 중복되는 로직 찾기
2. Custom Hook으로 추출하기

function useUserStatus(userId) {
	중복되는 코드 작성
    ...
    ...
    return isOnline;
}    

단순한 자바스크립트이지만 use를 시작으로 함수명을 정하고 Custom Hook 또한 Hook의 규칙을 따른다

Custom Hook 적용 후

function UserStatus(props) {
  const isOnline = useUserStatus(props.user.id); // Custom Hook 사용
 
  if(isOnline === null) {
    return '대기중...';
  }
}

function UserListItem(props) {
  const isOnline = useUserStatus(props.user.id);
 
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.user.name}
    </li>
  );
}

---

각각의 Custom Hook은 호출에 대해서 분리된 state를 얻게 된다
각각의 Custom Hook의 호출 또한 완전히 독립적이다
때문에 Hook들이 데이터를 공유하려면 Hook의 인자값에 다른 Hook이 대입된 변수나 배열의 인수를 인자값으로 넣어야 한다

function ChatUserSelector(props) {
  const [userId, setUserId] = useState(1); // custom Hook을 사용해 배열에 대입
  const isUserOnline = useUserStatus(userId); // 대입된 배열의 값을 다른 custom Hook의 인수로 입력
 
  return(
    ...
  );
}