GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » jsx
추적: • variable • angular6 • regexp • first • angular • variable_declarations
typescript:jsx

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
typescript:jsx [2019/07/30 10:11] – taekgutypescript:jsx [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 86: 줄 86:
 </code> </code>
  
-==== 값-기반 요소 (Value-based elements) ====+===== 값-기반 요소 (Value-based elements) =====
  
 값 기반 요소는 스코프에 있는 식별자로 간단히 조회됩니다. 값 기반 요소는 스코프에 있는 식별자로 간단히 조회됩니다.
줄 98: 줄 98:
  
 값 기반 요소를 정의하는 방법에는 두 가지가 있습니다: 값 기반 요소를 정의하는 방법에는 두 가지가 있습니다:
-  - 무상태 함수형 컴포넌트 (SFC)+  - 함수 컴포넌트(FC)
   - 클래스 컴포넌트   - 클래스 컴포넌트
  
-이 두 가지 타입의 값 기반 요소는 JSX 표현식에서 구분할 수 없기 때문에 일단 오버로드 해석을 사용하여 무상태 함수형 컴포넌트로 표현식을 해결하려고 합니다. +이 두 가지 유형의 값 기반 요소는 JSX 식에서 서로 구별 할 수 없으므로 첫 번째 TS는 과부하 해결을 사용하여 함수 구성 요소로 표현식을 확인하려고합니다. 프로세스가 성공하면 TS는 표현식을 해당 선언으로 해결하는 작업을 완료합니다. 값이 함수 구성 요소로 해결되지 않으면 TS는 클래스 구성 요소로 해결하려고 시도합니다. 실패 할 경우 TS는 오류를보고합니다. 
-프로세스가 성공하면 선언에 대한 표현식을 해결합니다. + 
-만약 SFC로 해결하지 못한다면 클래스 컴포넌트로 해결합니다. +===== 함수 컴포넌트(Function Component) =====
-만약 실패한다면 오류를 보고합니다.+
  
-무상태 함수형 컴포넌트(Stateless Functional Component) 
 이름에서 알 수 있듯이 컴포넌트는 첫 번째 인수가 props 객체인 JavaScript 함수로 정의됩니다. 이름에서 알 수 있듯이 컴포넌트는 첫 번째 인수가 props 객체인 JavaScript 함수로 정의됩니다.
 반환 타입은 JSX.Element에 할당할 수 있도록 강제합니다. 반환 타입은 JSX.Element에 할당할 수 있도록 강제합니다.
  
 +<code javascript>
 interface FooProp { interface FooProp {
   name: string;   name: string;
줄 122: 줄 121:
  
 const Button = (prop: {value: string}, context: { color: string }) => <button> const Button = (prop: {value: string}, context: { color: string }) => <button>
-SFC는 단순히 JavaScript 함수이기 때문에 여기서도 함수 오버로드를 활용할 수 있습니다.+</code> 
 +Function Component는 단순히 JavaScript 함수이기 때문에 여기서도 함수 오버로드를 활용할 수 있습니다.
  
 +<code javascript>
 interface ClickableProps { interface ClickableProps {
   children: JSX.Element[] | JSX.Element   children: JSX.Element[] | JSX.Element
줄 140: 줄 141:
   ...   ...
 } }
-클래스 컴포넌트 (Class Component)+</code> 
 +>참고 : 함수 구성 요소는 이전에는 Stateless Function Components (SFC)로 알려져있었습니다. 최근 버전의 react에서는 기능 구성 요소를 더 이상 stateless로 간주 할 수 없으므로 ''SFC'' 유형과 ''StatelessComponent''는 더 이상 사용되지 않습니다. 
 + 
 +===== 클래스 컴포넌트 (Class Component) ===== 
 클래스 컴포넌트의 타입을 제한할 수 있습니다. 클래스 컴포넌트의 타입을 제한할 수 있습니다.
 하지만 이를 위해 새로운 두 가지를 도입해야 합니다: 요소 클래스 타입과 요소 인스턴스 타입 하지만 이를 위해 새로운 두 가지를 도입해야 합니다: 요소 클래스 타입과 요소 인스턴스 타입
줄 151: 줄 156:
 다시 ES6 클래스의 경우, 인스턴스 타입은 해당 클래스의 인스턴스 타입이 되고 팩토리 함수의 경우 해당 함수에서 반환되는 값의 타입이 됩니다. 다시 ES6 클래스의 경우, 인스턴스 타입은 해당 클래스의 인스턴스 타입이 되고 팩토리 함수의 경우 해당 함수에서 반환되는 값의 타입이 됩니다.
  
 +<code javascript>
 class MyComponent { class MyComponent {
   render() {}   render() {}
줄 173: 줄 179:
 // 요소 클래스 타입 => 팩토리 함수 // 요소 클래스 타입 => 팩토리 함수
 // 요소 인스턴스 타입 => { render: () => void } // 요소 인스턴스 타입 => { render: () => void }
 +</code>
 +
 요소 인스턴스 타입이 흥미로운 이유는 JSX.ElementClass에 할당되어야 하며 그렇지 않을 경우 오류가 발생하기 때문입니다. 요소 인스턴스 타입이 흥미로운 이유는 JSX.ElementClass에 할당되어야 하며 그렇지 않을 경우 오류가 발생하기 때문입니다.
 기본적으로 JSX.ElementClass는 {}이지만 JSX의 사용을 적절한 인터페이스에 맞는 타입으로 제한하도록 확장할 수 있습니다. 기본적으로 JSX.ElementClass는 {}이지만 JSX의 사용을 적절한 인터페이스에 맞는 타입으로 제한하도록 확장할 수 있습니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface ElementClass {   interface ElementClass {
줄 199: 줄 208:
 <NotAValidComponent />; // 오류 <NotAValidComponent />; // 오류
 <NotAValidFactoryFunction />; // 오류 <NotAValidFactoryFunction />; // 오류
-속성 타입 검사 (Attribute type checking)+</code> 
 + 
 +===== 속성 타입 검사 (Attribute type checking) ===== 
 속성 타입 검사를 하는 첫 번째 단계는 요소 속성 타입을 결정하는 것입니다. 속성 타입 검사를 하는 첫 번째 단계는 요소 속성 타입을 결정하는 것입니다.
 이것은 내장 요소와 값 기반 요소 간에 약간의 차이가 있습니다. 이것은 내장 요소와 값 기반 요소 간에 약간의 차이가 있습니다.
  
 내장 요소의 경우 JSX.IntrinsicElements 프로퍼티의 타입입니다. 내장 요소의 경우 JSX.IntrinsicElements 프로퍼티의 타입입니다.
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface IntrinsicElements {   interface IntrinsicElements {
줄 213: 줄 225:
 // 'foo'에 대한 요소 속성 타입은 '{bar?: boolean}'입니다. // 'foo'에 대한 요소 속성 타입은 '{bar?: boolean}'입니다.
 <foo bar />; <foo bar />;
 +</code>
 +
 값 기반 요소의 경우 조금 더 복잡합니다. 값 기반 요소의 경우 조금 더 복잡합니다.
 이전에 결정된 요소 인스턴스 타입의 프로퍼티 타입에 따라 결정됩니다. 이전에 결정된 요소 인스턴스 타입의 프로퍼티 타입에 따라 결정됩니다.
줄 219: 줄 233:
 그런 다음 해당 프로퍼티의 이름이 사용됩니다. 그런 다음 해당 프로퍼티의 이름이 사용됩니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface ElementAttributesProperty {   interface ElementAttributesProperty {
줄 234: 줄 249:
 // 'MyComponent'의 요소 속성 타입은 '{foo?: string}'입니다 // 'MyComponent'의 요소 속성 타입은 '{foo?: string}'입니다
 <MyComponent foo="bar" /> <MyComponent foo="bar" />
 +</code>
 요소 속성 타입은 JSX에서 속성을 타입을 확인하는 데 사용됩니다. 요소 속성 타입은 JSX에서 속성을 타입을 확인하는 데 사용됩니다.
 선택적 프로퍼티와 필수 프로퍼티가 지원됩니다. 선택적 프로퍼티와 필수 프로퍼티가 지원됩니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface IntrinsicElements {   interface IntrinsicElements {
줄 249: 줄 266:
 <foo requiredProp="bar" unknownProp />; // 오류, unknownProp이 존재하지 않습니다. <foo requiredProp="bar" unknownProp />; // 오류, unknownProp이 존재하지 않습니다.
 <foo requiredProp="bar" some-unknown-prop />; // 좋아요, 'some-unknown-prop' 은 유효한 식별자가 아니기 때문입니다. <foo requiredProp="bar" some-unknown-prop />; // 좋아요, 'some-unknown-prop' 은 유효한 식별자가 아니기 때문입니다.
-참고: 속성 이름이 유효한 JS 식별자 (예 :data- *속성)가 아닌 경우 요소 속성 타입에서 속성 이름을 찾을 수 없으면 오류로 간주되지 않습니다.+</code> 
 +>참고: 속성 이름이 유효한 JS 식별자 (예 :data- *속성)가 아닌 경우 요소 속성 타입에서 속성 이름을 찾을 수 없으면 오류로 간주되지 않습니다.
  
-전개 연산자도 작동합니다:+또한 JSX.IntrinsicAttributes 인터페이스는 JSX 프레임 워크에서 사용되는 추가 속성을 지정하는 데 사용할 수 있습니다.이 속성은 일반적으로 구성 요소의 소품이나 인수 (예 : React의 키)에서 사용되지 않습니다. 특히, 일반 JSX.IntrinsicClassAttributes <T> 유형은 클래스 구성 요소 (함수 구성 요소 제외)에 대해 동일한 종류의 추가 속성을 지정하는 데 사용될 수도 있습니다. 이 유형에서 제네릭 매개 변수는 클래스 인스턴스 유형에 해당합니다. React에서는 Ref <T> 유형의 ref 속성을 허용하는 데 사용됩니다. 일반적으로 JSX 프레임 워크의 사용자가 모든 태그에 일부 속성을 제공해야하는 경우가 아니라면이 인터페이스의 모든 속성을 선택적으로 지정해야합니다.
  
 +전개 연산자도 작동합니다:
 +<code javascript>
 var props = { requiredProp: "bar" }; var props = { requiredProp: "bar" };
 <foo {...props} />; // 좋아요 <foo {...props} />; // 좋아요
줄 258: 줄 278:
 var badProps = {}; var badProps = {};
 <foo {...badProps} />; // 오류 <foo {...badProps} />; // 오류
-하위 타입 검사 (Children Type Checking)+</code> 
 + 
 +===== 하위 타입 검사 (Children Type Checking) ===== 
 2.3 버전에서 하위 타입 검사를 도입했습니다. 2.3 버전에서 하위 타입 검사를 도입했습니다.
 하위(children)는 요소 타입 검사에서 결정된 요소 속성 타입의 프로퍼티 입니다. 하위(children)는 요소 타입 검사에서 결정된 요소 속성 타입의 프로퍼티 입니다.
줄 264: 줄 287:
 JSX.ElementChildrenAttribute는 단일 프로퍼티로 선언해야합니다. JSX.ElementChildrenAttribute는 단일 프로퍼티로 선언해야합니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface ElementChildrenAttribute {   interface ElementChildrenAttribute {
줄 269: 줄 293:
   }   }
 } }
 +</code>
 하위의 타입을 명시적으로 지정하지 않는다면 React typings의 기본 타입을 사용합니다. 하위의 타입을 명시적으로 지정하지 않는다면 React typings의 기본 타입을 사용합니다.
  
 +<code jsx>
 <div> <div>
   <h1>Hello</h1>   <h1>Hello</h1>
줄 285: 줄 311:
   {"This is just a JS expression..." + 1000}   {"This is just a JS expression..." + 1000}
 </CustomComp> </CustomComp>
 +</code>
 +
 다른 속성과 마찬가지로 하위 타입을 지정할 수 있습니다. 다른 속성과 마찬가지로 하위 타입을 지정할 수 있습니다.
 이렇게 하면 React typings에서 기본 타입을 덮어쓰게 됩니다. 이렇게 하면 React typings에서 기본 타입을 덮어쓰게 됩니다.
  
 +<code javascript>
 interface PropsType { interface PropsType {
   children: JSX.Element   children: JSX.Element
줄 319: 줄 348:
   World   World
 </Component> </Component>
-JSX 결과 타입 (The JSX result type)+</code> 
 + 
 +===== JSX 결과 타입 (The JSX result type) ===== 
 기본적으로 JSX 표현식의 결과 타입은 any로 분류됩니다. 기본적으로 JSX 표현식의 결과 타입은 any로 분류됩니다.
 JSX.Element 인터페이스를 지정하여 사용자 정의 타입을 사용할 수 있습니다. JSX.Element 인터페이스를 지정하여 사용자 정의 타입을 사용할 수 있습니다.
줄 325: 줄 357:
 이것은 블랙박스 입니다. 이것은 블랙박스 입니다.
  
-표현식 포함하기 (Embedding Expressions) +===== 표현식 포함하기 (Embedding Expressions) =====
-JSX는 중괄호 ({ })로 표현식을 감싸고 태그 사이에 표현식을 삽입할 수 있게합니다.+
  
 +JSX는 중괄호 ({ })로 표현식을 감싸고 태그 사이에 표현식을 삽입할 수 있게합니다.
 +<code javascript>
 var a = <div> var a = <div>
   {["foo", "bar"].map(i => <span>{i / 2}</span>)}   {["foo", "bar"].map(i => <span>{i / 2}</span>)}
 </div> </div>
 +</code>
 위의 코드는 문자열을 숫자로 나눌 수 없으므로 오류가 발생합니다. 위의 코드는 문자열을 숫자로 나눌 수 없으므로 오류가 발생합니다.
  
 출력은 preserve 옵션을 사용할 때 다음과 같습니다: 출력은 preserve 옵션을 사용할 때 다음과 같습니다:
 +<code javascript>
 var a = <div> var a = <div>
   {["foo", "bar"].map(function (i) { return <span>{i / 2}</span>; })}   {["foo", "bar"].map(function (i) { return <span>{i / 2}</span>; })}
 </div> </div>
-리액트 통합 (React integration)+</code> 
 + 
 +===== 리액트 통합 (React integration) ===== 
 React와 함께 JSX를 사용하려면 React typings을 사용해야 합니다. React와 함께 JSX를 사용하려면 React typings을 사용해야 합니다.
 이러한 typings은 React와 함께 사용하기에 적합하도록 JSX 네임스페이스를 적절하게 정의합니다. 이러한 typings은 React와 함께 사용하기에 적합하도록 JSX 네임스페이스를 적절하게 정의합니다.
  
 +<code javascript>
 /// <reference path="react.d.ts" /> /// <reference path="react.d.ts" />
  
줄 356: 줄 394:
 <MyComponent foo="bar" />; // 좋아요 <MyComponent foo="bar" />; // 좋아요
 <MyComponent foo={0} />; // 오류 <MyComponent foo={0} />; // 오류
 +</code>
 +
 +===== Factory Functions =====
 +jsx : react 컴파일러 옵션에서 사용되는 정확한 팩토리 함수는 구성 가능합니다. jsxFactory 명령 행 옵션이나 인라인 @jsx 주석 pragma를 사용하여 파일 단위로 설정할 수 있습니다. 예를 들어, jsxFactory를 createElement로 설정하면 <div />는 React.createElement ( "div") 대신 createElement ( "div")로 방출됩니다.
 +
 +주석 pragma 버전은 다음과 같이 사용할 수 있습니다 (TypeScript 2.8).
 +
 +<code javascript>
 +import preact = require("preact");
 +/* @jsx preact.h */
 +const x = <div />;
 +</code>
 +
 +emits as:
 +
 +<code javascript>
 +const preact = require("preact");
 +const x = preact.h("div", null);
 +</code>
 +선택한 팩토리는 JSX 네임 스페이스가 전역 검사로 돌아 가기 전에 (유형 검사 정보 용으로) 조회 된 위치에도 영향을 미칩니다. 팩토리가 React.createElement (기본값)로 정의 된 경우 컴파일러는 전역 JSX를 확인하기 전에 React.JSX를 확인합니다. 팩토리가 h로 정의되면 글로벌 JSX 이전에 h.JSX를 확인합니다.
typescript/jsx.1564481509.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구