[React] jsx에 대해 알아보자! 변수 선언과 활용

저번에 index.js파일을 만들고 h1태그를 반환하는 리액트 함수를 만들었단 말이져\?

저렇게 태그로 반환되는걸 jsx라고 한다네염

 

 

그럼 이렇게 반환된 코드는

이렇게 표현된다고 함;;; 

 

여튼 이론은 이러하고 message라는 변수를 선언해서 string값으로 설정한 후 h1 태그에 출력해보자.

 

 

* 변수 선언과 출력

    function App(){
        <h4> this is an element! </h4> // it dosen't show on the screen, because it's not returning on line 14

        let message = 'Bye there!'
        let num = Math.random()
        if(num > 0.5){
            message = 'Hello there!'
        }
        console.log("num : ", num, ", message : ", message);
        return <h1>{message}</h1>;
    }

JS에서 변수나 expression을 나타낼 때 curly braces를 사용하는데 curly braces는 string이나 number를 표현할 때 사용한다. bool은 값이 출력되지 않고 object인 경우에는 에러가 발생함

 

 

또는 변수 사용하지 않고 바로 curly braces로 출력할 수 있다

    function App(){
        const date = new Date();
        const time = date.toLocaleTimeString();

        //return <h1>{time}</h1>
        return <h1>{new Date().toLocaleTimeString()}</h1>;
    }

 

위 코드에서 5행과 6행은 동일한 코드인데 6행에서는 date 객체를 따로 생성하지 않고 바로 curly braces에서 생성해서 함수를 호출한다