if(a) 과 if(a !== null)이 동일하게 작동하지 않는 이유

개인 프로젝트를 하는데 state인 editingIndex의 초기값을 null로 두고 

 useEffect(() => {
    if (editingIndex && inputRef.current) {
      inputRef.current.focus();
    }
  }, [editingIndex]);

이렇게 useEffect로 변경될 때 input창에 바로 포커싱을 주어 UX를 향상시키기 위한 코드를 짰다.

근데 editingIndex가 1번 째 일 때는 focus가 잘 되는데 유독 0번 째 일 때만 focus가 되지 않는 것이다.

 

그래서

 useEffect(() => {
    if (editingIndex !== null && inputRef.current) {
      inputRef.current.focus();
    }
  }, [editingIndex]);

이렇게 !== null을 명시해주니까 0번 째 값도 focus가 잘 이루어졌다.

내 머리로는 위 둘은 동일한 결과를 도출할 거 같은데,, 이유를 찾아보았다

 

해당 이유는 자바스크립트에서 참과 거짓을 다루는 방법에서 나오는 차이였다.

자바스크립트에서는 특정 값을 "거짓"으로 취급되는데 

익히 알고있는 false, 0, ""(빈문자열), null, undefined, NaN이다. 

 

따라서 editingIndex가 0일 때 false로 취급되어 null이 아니더라도 focus가 되지 않았던 것이다. 

 

만약 state의 타입이 number일 때  'editingIndex !== null' 처럼 명시적으로 확인하는 것이 좋은지 알게되었다.