JSX.Element vs ReactNode vs ReactElement의 차이
타입스크립트로 리액트 코드를 작성하다보면 컴포넌트의 타입을 정해줘야하는데 너무 여러가지 타입이 있어서 헷갈려서 정리하고자 합니다. 배경지식 클래스형 컴포넌트는 render메소드에서 ReactNode를 리턴한다. 함수형 컴포넌트는 ReactElement를 리턴한다. JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다. html 처럼 생긴 문법을 리액트 라이브러리의 렌더링 함수로 변환하는것이다. 그래서 JSX를 사용하지 않고도 리액트를 사용할 수 있으나(JSX없이 사용하는 React) 이렇게 하면 매우 불편하다. // jsx Hello {this.props.toWhat} JSX는 아래 처럼 변경된다. // transpile ..
React
2020. 5. 21. 14:22
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- es6
- Action
- javascript
- webpack
- return type
- type alias
- async
- promise
- hydrate
- props
- mobx
- atomic design
- Next.js
- reducer
- await
- state
- server side rendering
- storybook
- reactdom
- rendering scope
- Polyfill
- react
- react hooks
- computed
- useEffect
- Babel
- reflow
- useRef
- design system
- typescript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함