[03/06]

[dxwwan]

8장 TSX

1. 컴포넌트의 타입

• 어떤 타입을 사용해야 할까?

React.ReactElement vs

JSX.Element vs
React.ReactNode

1. ReactElement

• JSX가 createElement메서드를 호출
• 반환 타입은 ReactElement
• 실제 DOM이 아니라 가상 DOM을 기반으로 렌더링
• 리액트 컴포넌트를 객체로 저장

1. JSX.Element

• ReactElement의 확장
• 외부 라이브러리에서 컴포넌트 타입을 재정의 할 수 있는 유연성

1. React.Node

• ReactElement외에도 boolean, string, number 등 여러 타입 포함
• react의 render함수가 반환할 수 있는 모든 형태를 담고 있음.
• 컴포넌트가 다양한 형태를 가질 수 있게 하고 싶을 때

HTML요소 활용

1. DetailHTMLProps, ComponentWithoutRef

• 전자가 내가 쓰던 방식
• 후자가 더 간단해 보임
• 장단점이 뭘까
  • 전자는 실제로 동작하지 않는 ref를 받도록 타입이 지정되어 예기치 않은 에러가 발생할 수 있기에 후자로 생성하는 것이 안전하다.
• ref?
  • 생성된 DOM이나 리액트 엘리먼트에 접근하는 방법
  • 재사용할 수 있는 Button 컴포넌트에 ref를 통해 접근

2. 타입으로 리액트 컴포넌트 만들기

• 프로퍼티를 구조화
• 필수 전달 속성을 표시해 타입 에러
• 유지보수에 nice
• 하지만 추가적인 설명이 필요할 때가 있다.

리액트 이벤트

• 리액트 onChange와 JS onchange가 완전히 동일하게 동작하지는 않는다?
• 전자는 리액트 버블링 단계에서 호출
• 이벤트 캡쳐 단계에서 호출하려면 onClickCapture처럼 capture 붙여줘야함.

훅에 타입 추가

• 상태나 프로퍼티에 제대로된 타입을 지정해주지 않으면 사이드 이펙트 발생 가능

---

ISSUE

1. 리액트 이벤트

• 리액트의 onChange이벤트와 JS의 onchange가 같이 동작하는게 아니라고 하는데 어떻게 구분 되는건지 잘 이해가 안됩니다!

2. DetailHTMLProps, ComponentWithoutRef

• 여러분은 어떤 방식을 선호하시나요? 이유는 무엇인가용?