[데브코스 Day 48] 2022.12.21

📖오늘 배운  것

new Image

: 새로운 HTMLImageElement 인스턴스를 만든다.

document.createElement('img')와 동일하게 작동한다.

 

이벤트 핸들러

• onAbort: 사용자가 이미지 로딩을 중간에 멈출 때 발생하는 이벤트
• onError: 이미지 로딩 중 에러가 발생했을 때
• onLoad: 이미지가 성공적으로 로딩되었을 때

 const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const image = new Image();
    image.src = src;
    image.onload = () => setLoaded(true);
  }, [src]);

 

 

Array.from

:유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다. 

Array.from(Array(line), (_, index) =>
       ...
      )

첫 번째 매개변수 - 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체

두 번째 매개변수 - 배열의 모든 요소에 대해 호출할 맵핑 함수

(언더스코어(_) 불필요한 인자의 공간을 채우기 위한 용도)

 

 

 

<select> <options> 태그 hidden 속성

콤보박스를 만들기 위해 select, option 태그를 사용한다.

이때 placeholder를 지정하기 위해서 hidden을 설정하고 목록에 맨 앞에 두면 placeholder처럼 보이지만 목록에는 보이지 않게 된다. 

  if (placeholder) {
    options.unshift(
      <option key="placeholder" value="" hidden>
        {placeholder}
      </option>
    );
  }

 

 

React.children

this.props.children을 다루는 유틸리티 함수들을 제공한다.

 

React.Children.map

React.Children.map(children, function[(thisArg)])

 

 

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

 

React.Children.count

React.Children.count(children)

Children에 포함된 컴포넌트의 개수를 반환

 

 

React.Children.only

React.Children.only(children)

Children이 단 하나의 자식을 갖는지 확인하고 해당 자식 엘리먼트를 반환

 

React.Children.toArray

React.Children.toArray(children)

각 자식에 key가 할당된 1차원 배열을 반환한다.

 

 

React.isValidElement

React.isValidElement(object)

객체가 React 엘리먼트인지 확인. true 혹은 false를 반환

 

 

 

React.cloneElement

React.cloneElement(
  element,
  [config],
  [...children]
)

첫 번째 인수를 시작점으로 새 엘리먼트를 복제하고 반환

[config]: 원본 엘리먼트에 더해서 복제된 엘리먼트에 추가될 props

[...children]: 복제된 객체의 children

 

• 원래 엘리먼트의 props와 새 props가 얕게 병합된다.
• 새 child가 기존 child를 대체한다.
• 원래 엘리먼트의 key와 ref가 유지된다. 

 

하위 요소를 추가하거나 수정하려는 경우 유용하다!

 

 

 

마우스 이벤트

• mousedown: 해당 element에서 마우스 버튼을 눌렀을 때 발생
• mousemove: 해당 element에서 마우스를 움직였을 때 발생
• mouseup: 해당 element에서 눌렀던 마우스 버튼을 땔 때 발생

 

💭배운 점

React의 최상위 API를 써본 적이 거의 없었는데 이번 기회에 존재를 알게 되고 사용해볼 수 있어서 좋았다. 공식문서 보는 연습도 할 겸 공식문서 보면서 해당 내용에 대해 더 공부해보고 싶다.