Code a Life

2 minute read

JSX란?

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

위와 같이 JSX 구문으로 편하게 “HTML Element”를 만들어 낼 수 있습니다. </br>
이 함수의 형식은 다양한 형태로 빚어질 수 있는데요,
밑을 참고하시면 좋을 것 같습니다.

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>를 반환합니다.

Updated:

You may also enjoy