ReactJS_2:JSX_Syntax

JSX Basic Syntax

 

 

● JSX는 html에서 사용하는 class 대신 className사용

<p className="bar">hi</p>

 

● 변수 외부 선언 후, JSX내부에서 {변수명}으로 불러오면 사용가능

let val='valueA';
return (
	<h4>{val}</h4>
 )

 

● return 안에는 2개의 div 병렬적으로 표현 X

    But, 의미없는 div태그를 줄이고 싶다면 <> </>로 묶어서 표현 가능

return(
<>
	<div className="section1">
	</div>
    
    
	<div className="section2">
	</div>
</>
)

 

● state 사용

import {useState} from 'react';

 

● valA: state, setValA: state변경함수, useState('state의 초기값')

let [valA,setValA] = useState('초기값');

 

● State를 사용하는 이유

일반 변수는 html에 자동으로 변경 X -> 새로고침과 같은 방법 필요

State는 값이 변경되어지면 html에서 자동적으로 재렌더링됨 -> 변동 시 자동으로 html에 반영되게 하고싶을때 사용

모든 변수를 state화 하지말고 자주 변경될 거 같은 부분만 state화

 

워닝메세지 불필요시 맨위에 /*esling-disable*/문구 추가