Chapter2 - 리액트와 Typescript 간단 적용 예제

코드 이해하기

먼저, src/ 내부의 모든 ts, tsx 파일은 맨 위에 디폴트로 import 해야하는 항목이 있습니다.

import React from 'react';

typescript 를 적용하기 위해서 필수로 입력해야 하는 문장입니다.



먼저, yarn create react-app [생성한 프로젝트 이름] --template typescript로 생성한

파일을 이해하기 위해 src/App.tsx 파일을 열어봅니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() : JSX.Element {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

• 최신 구문을 지향하기 때문에, import 를 사용합니다.
  

• const React = require('react'); ==> import React from 'react'

• JSX.Element 를 return 한다는 것은 본문의 반환 내용이 JSX구문으로 이루어진 객체를 반환한다는 의미입니다.

• typescript 를 사용했으므로, index.tsx에서 App.tsx를 사용할 때, 정확히 JSX.Element를 반환한다는 것을
  알 수 있습니다.

JSX란?

---

function App(){
    return(
        <div>
            Hello <b>World!</b>
        </div>
    )
}

위와 같이 JSX 구문으로 편하게 "HTML Element"를 만들어 낼 수 있습니다.


이 함수의 형식은 다양한 형태로 빚어질 수 있는데요,

밑을 참고하시면 좋을 것 같습니다.

1. function에 Return Type 달아주기

function App() : JSX.Element {
    return(
        <div>
            Hello <b>World!</b>
        </div>
    )
}

2. const 변수 선언 방식으로 컴포넌트 만들기

//const App = () => {  
const App = () : JSX.Element => {
    return(
        <div>
            Hello <b>World!</b>
        </div>
    )
}

• 반환 형식으로 JSX.Element 를 써 주지 않아도 되는 이유는, return 문에서
  
  JSX.Element 형식으로 구문이 써 져 있기 때문입니다. ( JSX 문법)

• 메인 방식으로 "2"번 방식이 쓰이니 참고하시길 바랍니다.

  
  

JSX 문법

JSX 문법으로 return 문을 만들 때, 반드시 하나의 부모 요소로 감싸진 상태여야 합니다.

Error 예시

// function App() {
const App = () : JSX.Element => {
    return(
        <h1>Hello React!</h1>
        <h2>Is Working Good?</h2>
    )
}
export default App;

• <h1></h1> 그리고 <h2></h2> 요소가 하나의 부모 요소로 감싸인 것이 아니라,
  
  각각의 요소가 최상단에 위치하여 오류 발생

정답 예시 1

const App = () : JSX.Element => {
    return(
        <div>
            <h1>Hello React!</h1>
            <h2>Is Working Good?</h2>
        </div>
    )
}
export default App;

• h1, h2 요소가 하나의 <div> 요소로 감싸여 오류가 나지 않습니다.

정답 예시 2

// (...)
import { Fragment} from 'react'

const App = () : JSX.Element => {
    return (
        <Fragment>
            <h1>Hello React!</h1>
            <h2>Is Working Good?</h2>
        </Fragment>
    );
};

• Fragment 를 사용하여 div를 사용하지 않을 수 있습니다.
• 하지만, 굳이 Fragment를 사용 할 필요가 없습니다. -> 밑의 예시

정답 예시 3

const App = () : JSX.Element => {
    return(
        <>
            <h1>Hello React!</h1>
            <h2>Is Working Good?</h2>
        </>
    )
}

• <></>를 사용하여 Fragment와 같은 효과를 낼 수 있습니다.
• 게다가 훨씬 더 편합니다.

---

자바스크립트 변수를 JSX 안에 쓸려면?

const App = () : JSX.Element => {
    const name : string = 'react';
    return(
        <>
            <h1>Hello { name }! </h1>
            <h2>Is Working Good?</h2>
        </>
    )
}
export default App;

• JSX 문법 내에서 javascript or typescript 변수 및 문법을 쓰고 싶다면 { } 를 쓰면 됩니다.
  

• 나중에 JSX 문법 내부의 { } 내부에 ( ) 를 선언하여 다시 JSX 문법을 선언 할 수 있습니다.

  
  

{ }, ( ) 사용하여 "If 문 대신 조건부 연산자 사용하기"

const App = () : JSX.Element => {
    const name : string = 'react' // 'react'와 타입이 일치하는지, 값이 일치하는지 계산하기 때문에
    // 변수 name 에 string을 선언합니다.
    return(
        <div>
            {name === 'react' ? (<h1>It is React.</h1>) : (<h1>It is Not React!</h1>)}
        </div>
    )
}
export default App;

• 조건부 연산자는 다음과 같이 구성됩니다.

• (true or false 가 되는 조건) ? (true 시 반환 할 것) : (false 시 반환 할 것)

• name === 'react' : true or false가 되는 조건

• (<h1>It is React.</h1>) : ( true 시 반환 할 것 )

• (<h1>It is Not React!</h1>) : ( false 시 반환 할 것)

• 즉, App 컴포넌트가 반환하는 형식이 어떻게 지정되냐면,
  
  name === 'react'가 true 라면, <h1>It is React.</h1> 반환,
  
  name === 'react'가 false 라면, <h1>It is Not React!</h1> 반환

• 둘 다 JSX.Element에 해당합니다.

And 연산자 &&를 사용한 조건부 렌더링 - Typescript

상황 1 - null반환이 가능하긴 하다

const App = () : JSX.Element => {
    const name = 'React';
    return <div>{name === 'react' ? (<h1>It is react.</h1>) : null }</div>
}
export default App;

undefined를 렌더링하지 않기

상황 2 - undefined 반환은 불가능하다

/** Error !! */
const App = () : JSX.Element => {
    const name : undefined = undefined;
    return name;
}

/** Collect! */
const App = () : JSX.Element => {
    const name : undefined = undefined;
    return <div>{name || 'React'}</div>;
}

• undefined는 최 하위 오브젝트입니다.

• name : undefined 라면, <div>'React'</div> 를 반환합니다.

• name : undefined가 아니라면, <div>{name}</div>를 반환합니다.