Today I Learned

event.target vs event.currentTarget

• target은 정확히 선택된 element(최하위)가 선택되는 반면
• currentTarget은 핸들러가 있는 element가 선택 됨

참고

• https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
• https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

ReactNode vs ReactElement vs FC

// react/index.d.ts
type JSXElementConstructor<P> =
        | ((props: P) => ReactElement | null)
        | (new (props: P) => Component<P, any>);

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

사용 예

• 클래스형 컴포넌트는 render 메소드에서 ReactNode를 리턴한다
• 함수형 컴포넌트는 ReactElement를 리턴한다
• JSX는 바벨에 의해서 React.createElement(component, props, ...children)함수로 트랜스파일 된다

포함 관계

• JSX.Element의 제네릭 인터페이스가 ReactElement이기 때문에 둘은 묶어도 된다

ReactElement

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

• React.createElement를 호출하면 리턴 되는 타입
• 리액트 컴포넌트를 레코드(Javascript Object)형태로 풀어 놓은 것

ReactNode

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

• ReactNode는 ReactElement의 superset(상위 집합)

참고

• https://simsimjae.tistory.com/426

궁금한 점

• FC와 ReactElement는 무슨 차이가 있을까?

// FC 사용 예
const Atest: FC<ReactElement> = () => {
  return <div>test</div>;
};

// ReactElement 사용 예
function Atest():ReactElement {
  return <div>test</div>;
}

• 선언식 함수를 만들 때 FC를 사용할 수 있음
• ReactElement는 JSX 그 자체

React.FC

• 암시적으로 children(ReactNode)을 갖는 것으로 생각함

FC : FunctionComponent
// FC의 제네릭으로 전달하는 것은 FC의 리턴타입이 된다

참고

• https://github.com/facebook/create-react-app/pull/8177

Typescript : keyof

// keyof type operator
type Point = { x: number; y: number };
type P = keyof Point;
// P = 'x' | 'y';
// https://www.typescriptlang.org/docs/handbook/2/keyof-types.html