JSX 문법 1. html에 class 넣을 땐 className
잘보면 평소에 짜던 html/css와 다른 부분이 있습니다.
스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓰는 부분이 좀 다른데
왜냐면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 이상한 언어라서 그렇습니다.
원래 리액트환경에서 <div>하나 만들고 싶으면 자바스크립트로
React.createElement('div', null)
이딴 식으로 어렵게 코드짜야합니다.
근데 그러면 유저들 다 도망가기 때문에 JSX라는 언어를 대신 사용합니다.
JSX는 html과 사용방식은 비슷합니다.
근데 JSX는 일종의 자바스크립트라서
자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하시면 안됩니다.
그래서 class=" " 넣고 싶으면 className이라고 써야합니다.
이것이 JSX 다루는 첫째 문법이고 외우고 지나가도록 합시다.
JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}
자바스크립트 변수같은 곳에 있던 자료를
html 중간에 꽂아서 보여주고 싶을 때가 많습니다.
어떻게 하는지 알아봅시다.
function App(){
let post = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<div>블로그임</div>
<div>여기에 저 변수에 있던거 꽂고 싶으면?</div>
</div>
</div>
)
}
일단 위에 post라는 변수를 만들어서 잠깐 문자를 저장해놨습니다.
변수가 뭐냐고요?
변수는 길고 복잡한 자료를 잠깐 한 단어에 저장해서 쓸 수 있는 고마운 문법이고 var let const 키워드로 아무데나 만들면 됩니다.
아무튼 저 let post 안에 있던 자료를 <div>안에 꽂아넣고 싶으면 어떻게하죠?
옛날 자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런 식이었겠지만
리액트에서는 더 쉽게 데이터를 꽂아넣을 수 있습니다.
function App(){
let post = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<div>블로그임</div>
<div>{ post }</div>
</div>
</div>
)
}
중괄호안에 데이터바인딩하고 싶은 변수명만 담으시면 됩니다.
그럼 미리보기화면에서 <div>강남 우동 맛집</div> 요게 출력됩니다.
틀딱개발자들은 여기서 매우 편리함을 느낍니다. 여러분도 뭔가 느끼는척 하십시오
function App(){
var data = 'red';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
<div className={data}>안녕하세요</div>
</div>
</div>
)
}
온갖 곳에 {} 중괄호를 열어서 변수들을 집어넣을 수 있습니다.
href, id, className, src 등 여러가지 html 속성들에도 가능합니다.
위처럼 쓰면 <div className="red"> 이렇게 되겠군요.
참고로 변수에 있던걸 html에 꽂아넣는 작업을 있어보이는 말로 데이터바인딩이라고 합니다.
JSX 문법 3. html에 style속성 넣고싶으면
<div style="color : blue"> 이런걸 넣고 싶으면
JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야합니다.
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>
이렇게 넣어야합니다.
- { 속성명 : '속성값' } 이렇게 넣으면 됩니다.
- 근데 font-size 처럼 속성명에 대쉬기호를 쓸 수 없습니다.
대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다.
css 파일 열기 귀찮을 때 쓰면 됩니다.
'리액트' 카테고리의 다른 글
리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) (0) | 2024.07.12 |
---|---|
리액트>omponent : 많은 div들을 한 단어로 줄이고 싶으면 (0) | 2024.07.11 |
리액트>state 수정 (0) | 2024.07.11 |
리액트 다른 경로 설치에러 해결 (0) | 2024.07.11 |
리액트>설치와 개발환경 셋팅 (0) | 2024.07.11 |