with React

sangjuneeeee·2024년 5월 6일

React typescript

TypeScript

목록 보기

9/9

node_module/@types 에서 다양한 타입들을 확인할 수 있음

React.Node: 이 타입은 컴포넌트가 렌더링할 수 있는 모든 것을 나타냅니다. 즉, React 컴포넌트가 반환할 수 있는 모든 것을 포함하는 타입입니다. boolean, null, undefined, number, string, React.Element 등을 포함하고 있습니다.
React.Element: 이 타입은 리액트 요소를 나타냅니다. React.createElement 함수의 결과 또는 JSX 구문을 통해 생성된 객체를 나타냅니다. 이 요소는 컴포넌트와 그 컴포넌트의 속성, 자식 요소 등을 포함하고 있습니다.
JSX.Element: 이 타입은 JSX 요소를 나타냅니다. TypeScript에서 JSX 구문을 사용할 때, JSX 요소는 JSX.Element 타입을 가집니다. JSX.Element는 컴파일 과정에서 React.createElement 호출로 변환되므로, 실제로는 React.Element와 동일한 객체를 나타냅니다.
ReactChild: 이 타입은 React 컴포넌트가 렌더링할 수 있는 자식 요소의 타입을 나타냅니다. ReactChild는 ReactElement 또는 ReactText (즉, 문자열 또는 숫자)를 가리킵니다.

React.FC

React.FunctionComponent

JSX 코드를 반환하는 함수여야 함

props가 필요하다면 Generic을 이용하거나 타입을 지정해주고 사용하면 됨

// App.tsx
const App: React.FC = () => {
	const todos = [ { id: 't1', text: 'hi'}];

	return (
		<>
			<TodoList item = {todos}>
		</>
	)
}


// TodoList.tsx
interface TodoListProps {
	items: { id: string, text: string}[];
}

const TodoList: React.FC<TodoListProps> = props => {
	return <ul>
		{props.item.map(todo => (
			<li key = {todo.id}>{todo.text}</li>
		))}
	</ul>
}

혹은 React.FC를 사용하지 않는 것도 방법이 됨 (실무 개발자들은 React.FC 안 쓰는 거 같음)

React.Element & JSX.Element

React.Element: 이 타입은 React 요소를 나타내며, React.createElement 함수의 반환값을 포함합니다. React.Element는 React.createElement에 의해 반환되는 객체를 나타내며, 이 객체는 특정 컴포넌트 타입(type), 해당 컴포넌트에 전달되는 속성(props), 그리고 이 컴포넌트의 자식 요소들(children)를 포함합니다.
JSX.Element: 이 타입은 JSX 요소를 나타냅니다. TypeScript에서 JSX 문법을 사용하여 컴포넌트를 작성할 때, 이 JSX 요소는 JSX.Element 타입을 가집니다. JSX.Element는 컴파일 과정에서 React.createElement 호출로 변환되므로, 실제로는 React.Element와 동일한 객체를 나타냅니다.

React.createElement & JSX

React.createElement는 React 요소를 생성하는 함수입니다. 이 함수는 세 개의 매개변수를 받습니다: type, props, 그리고 children.

type: 이는 문자열(HTML 태그 이름)이거나 함수(컴포넌트)일 수 있습니다.
props: 이는 컴포넌트에 전달되는 속성을 나타내는 객체입니다.
children: 이는 컴포넌트의 자식 요소를 나타냅니다.

예를 들어, 다음과 같이 React.createElement를 사용하여 React 요소를 생성할 수 있습니다:

React.createElement('div', { className: 'greeting' }, 'Hello, world!');

위 코드는 다음의 JSX 코드와 동일한 결과를 생성합니다:

<div className="greeting">Hello, world!</div>

따라서, React.createElement는 JSX 코드를 JavaScript로 변환할 때 주로 사용됩니다. 실제로 Babel과 같은 컴파일러는 JSX 코드를 React.createElement 호출로 변환합니다. 그러나 대부분의 React 개발자들은 직접 React.createElement를 호출하는 대신 JSX 문법을 사용합니다

따라서, React.Element와 JSX.Element는 동일하다고 봐도 무방하다.

ReactChild

ReactChild는 React의 ReactNode 타입의 서브셋으로, React 컴포넌트가 렌더링할 수 있는 자식 요소의 타입입니다. ReactChild는 ReactElement 또는 ReactText (즉, 문자열 또는 숫자)를 가리킵니다.

아래는 ReactChild 타입의 정의입니다:

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

이는 컴포넌트의 자식 요소로서 React 요소 (즉, JSX 요소 또는 React.createElement에 의해 생성된 요소) 또는 문자열 또는 숫자를 반환할 수 있음을 의미합니다.

예를 들어, 아래의 컴포넌트는 모두 ReactChild 타입의 값을 반환합니다:

function Component1(): ReactChild {
  return <div>Hello, world!</div>;  // ReactElement를 반환
}

function Component2(): ReactChild {
  return "Hello, world!";  // 문자열을 반환
}

function Component3(): ReactChild {
  return 123;  // 숫자를 반환
}

따라서 ReactChild 타입은 컴포넌트의 자식 요소로 가능한 값의 범위를 나타내는 데 사용됩니다.

포함 관계
React.Node > React.Child> React.Element > JSX.Element

https://merrily-code.tistory.com/209

계속해서 추가 예정