Hooks - rule

DON'T CALL HOOKS CONDITIONALLY

useState 조건부 선언

if (condition) {
    const [state, setState] = useState(false);
}

이 경우 condition이 true일 경우에만 상태가 생성

조건부 반환 useEffect

  if (condition) {
    return <h2>Hello There</h2>;
  }
  // this will also fail
  useEffect(() => {
    console.log('hello there');
  }, []);
  return <h2>example</h2>;

useEffect의 호출위치가 조건부 반환 이후에 있어,
이 경우 condition이 true로 값이면 useEffect는 호출되지 않는다.

조건부로 내부에 훅을 선언할 경우 무결성과 의존성에 영향을 미친다.
조건부로 훅을 호출하면 무결성을 깨뜨릴 수 있으며, 의존성을 정확하게 파악하기 어려워 질 수있어 예상치 못한 동작이나 버그를 유발할 수 있다.

그러므로 컴포넌트 함수의 최상위 레벨에서만 호출해야한다.

Truthy and Falsy Values

자바스크립트에서 어떤 값이 truthy로 간주되는지는 그 값을 Boolean 문맥에서 사용했을때 true로 평가되는 경우이다. 어떤 값이 falsy로 간주되는지는 그 값을 Boolean문맥에서 사용했을 때 false로 평가되는 경우이다.

Javascript에서 falsy로 간주되는 값의 목록

• false
• 0 (제로)
• "" (빈 문자열)
• null
• undefined
• NaN (숫자가 아님)

나머지 모든 값, 객체와 배열을 포함하여 truthy로 간주된다.

For Example

const x = 'Hello';
const y = '';
const z = 0;

if (x) {
  console.log('x는 truthy입니다');
}

if (y) {
  console.log('y는 truthy입니다');
} else {
  console.log('y는 falsy입니다');
}

if (z) {
  console.log('z는 truthy입니다');
} else {
  console.log('z는 falsy입니다');
}

// 출력:
// "x는 truthy입니다"
// "y는 falsy입니다"
// "z는 falsy입니다"

변수 x는 비어 있지 않은 문자열로 truthy로 간주되므로 첫 번째 if문이 실행된다.
변수 y는 빈 문자열로 falsy로 간주되므로 두 번째 if문의 else 블록이 실행된다.
변수 z는 숫자 0으로 falsy로 간주되므로 세 번째 if문의 else블록이 실행된다.