본문 바로가기

[React] JSX 문법

민이(MInE) 2023. 12. 28.
반응형

 

 

JSX

우선 App.js를 아래와 같이 수정하고, App.css에 body와 .hello를 추가한다.

JSX에서는 <div className = "클래스이름">으로 작성해야 한다.

 

그리고 npm run start를 하면 아래와 같이 나옵니다

 

아래와 같이 변수를 {}를 이용하여 사용 가능하

 

 

 

 

State

 

변수대신에 state를 사용해도 되는데 import React, {useState} from 'react'; 를 추가해줘야 합니다.

그러고 나서 아래와 같이 사용하면 됩니다!

 

 

글제목은 state 데이터, 글제목변경은 state의 데이터를 변경하는 함수입니다.

아래와 같이 Array로 넣어줄 수도 있습니다.

 

 

 

 

Reference

https://velog.io/@kiyoog02/React-%EA%B8%B0%EC%B4%88-2-JSX%EC%99%80-state-%EC%82%AC%EC%9A%A9#3-style-%EC%86%8D%EC%84%B1

 

React 기초 (2) - JSX와 state 사용

React 기초

velog.io

 

반응형

'React' 카테고리의 다른 글

[React] react-router-dom 사용법  (0) 2023.12.31
[React] onClick과 component  (0) 2023.12.29
[React] React.js Fragments  (1) 2023.12.27
[React] React.js 시작  (2) 2023.12.27

댓글