240629 리액트 스터디 : useRef, useContext

 

✓ null vs undefined

- 명시성 차이

- undefined : 글로벌 객체의 속성에 대한 식별자

- null : 객체가 존재하지 않을 때, 리터럴
- 변수를 선언하고, 값을 할당하지 않았을 때 undefined
- 변수를 선언했으나 명시적으로 값이 비어있음을 나타낼 때 null

null === undefined; // false
null == undefined; // true

 

✓ undefined

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined

- 값을 할당하지 않은 상태 

- not writable / not enumerable / not configurable

 

✓ null

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/null

- 어떤 값이 의도적으로 비어있음

- 변수가 아무런 객체를 가리키지 않음

- boolean -> false

- 값이 없음을 명시

✓ useRef

- useRef() 처럼 파라미터 없이 사용할 때에는, DOM에 바인딩시키지 않아도 되는 경우

- cf) DOM에 바인딩 시키려면 반드시 null 등 초기값을 지정해 줘야함

- 리액트는 commit (렌더링) 단계 이후 ref값 바인딩

- 비디오, 이미지 조정 등의 경우에 사용

 

- useRef type

function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;

 

- mutableRefObject ⭐️

// error
import React, { useRef } from "react";

export const CuseRef = () => {
  const ref = useRef(0);

  return (
    <div>
      <input ref={ref} />
    </div>
  );
  /*
  'MutableRefObject<number>' 형식은 'LegacyRef<HTMLInputElement> | undefined' 형식에 할당할 수 없습니다.
  'MutableRefObject<number>' 형식은 'RefObject<HTMLInputElement>' 형식에 할당할 수 없습니다.
    'current' 속성의 형식이 호환되지 않습니다.
      'number' 형식은 'HTMLInputElement' 형식에 할당할 수 없습니다.ts(2322)
  */
};

// error
import React, { useRef } from "react";

export const CuseRef = () => {
  const ref = useRef<HTMLInputElement>();

  return (
    <div>
      <input ref={ref} />
    </div>
  );
  /*
  'MutableRefObject<HTMLInputElement | undefined>' 형식은 'LegacyRef<HTMLInputElement> | undefined' 형식에 할당할 수 없습니다.
  'MutableRefObject<HTMLInputElement | undefined>' 형식은 'RefObject<HTMLInputElement>' 형식에 할당할 수 없습니다.
    'current' 속성의 형식이 호환되지 않습니다.
      'HTMLInputElement | undefined' 형식은 'HTMLInputElement | null' 형식에 할당할 수 없습니다.
        'undefined' 형식은 'HTMLInputElement | null' 형식에 할당할 수 없습니다.ts(2322)
  */
};

 

✓ useContext

- 컴포넌트 재활용이 어려움 -> context의 특정 값을 참조하는 경우, 이 context를 벗어나면 값을 참조하기 어렵기 때문. ex) user 정보

 

✓ Array.prototype.some()

Array.some(callbackFn, thisArg);

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some

- 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

- callbackFn이 true을 반환하면 true를 반환, 그렇지 않으면 false를 반환

- 배열 변경 X

 

✓ DOM

- DOM이 없는 값을 찾으면 null 반환(undefined X)