[React.js] JSX 문법 실습

JSX문법 실습

---

index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// JSX 문법 및 특징 정리
import App from './App';
import reportWebVitals from './reportWebVitals';
// JSX문법을 활용한 실습
import AppSample from './AppSample';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <AppSample />
  // </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js 설명

AppSample을 화면에 띄워주기 위해서 index.js에서 import로 AppSample 파일을 불러온다.

render에서도 기존의 App을 AppSample로 변경해 준다. React.StrictMode는 주석처리해 준다. 저 태그는 리액트 문법을 검증? 해주는 태그인데 저게 있으면 2번 실행돼서 주석처리해 준다.

 

AppSample.js

* 더보기 클릭시 전체 코드 표시

// AppSample.js
function AppSample(){
    let name = prompt("이름을 입력하세요")
    let weather;
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    if(month >= 3 && month <= 5){
        weather = "봄"
    }
    else if (month >= 6 && month <= 8){
        weather = "여름"
    }
    else if (month >= 9 && month <= 11){
        weather = "가을"
    }
    else{
        weather = "겨울"
    }
    console.log(month);
    return(
        <div style={{padding : "20px"}}>
            <div style={{fontSize : "30px", fontWeight : "bold"}}>
                오늘 날짜 : {year}.{month}.{day}
            </div>
            <hr></hr>
            <div style={{fontWeight : "bold"}}>
                {name}님 지금은 {weather}입니다. 좋은 하루 보내세요!
            </div>
        </div>
    )
}

export default AppSample

AppSample.js 설명

현재 날짜를 가져오기 위해서 JS의 Date를 사용했다. 연, 월, 일을 추출하기 위해서 각각의 적절한 함수들을 사용했다.

월에 범위를 주어 조건식이 3개 이상이므로 조건식을 따로 만들어 결과로 계절 변수를 만들고 JSX의 특징인 표현식으로 나타냈다. 각 태그에 객체형태의 스타일 적용으로 스타일을 적용하고싶은 태그에 스타일을 적용하였다.

 

코드 결과