//App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
....
</div>
);
}
export default App;
App.js 파일을 열어보자
위에 App.js 파일에서는 HTML 태크를 반환하는 App이라는 함수를 선언하고 있다.
HTML을 반환한다고? ㅇㅇ
이렇게 HTML 형식의 값을 반환해 주거나 변수에 HTML을 대입할 수 있는 문법을 JavaScript eXtension 바로 JSX라고 한다.
스타일을 주기 위한 class명을 넣을 때 class=""이 아니라 아래와 같이 className=""이라고 쓴다.
(App.js)
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<h1>헬로 월드!</h1>
</div>
);
}
export default App;
(App.css)
.App {
background : black;
width : 100%;
display : flex;
color : white;
padding : 20px;
}
JSX 쉽다... 다음 나와
바로 코드로 알아보자
function App(){
let post = '하이 월드';
return (
<div className="App">
<div className="hi">
<div>인사해 내 친구 월드야</div>
<div>...</div>
</div>
</div>
)
}
위에 post라는 변수를 만들어 문자를 저장해 놨다. 저 let post 안에 있는 자료를 ...에 넣어보자
자바스크립트 문법을 쓴다면document.getElementById().innerHTML = ?? 이런 식이었겠지만 리엑트는 더 쉽다.
function App(){
let post = '하이 월드';
return (
<div className="App">
<div className="hi">
<div>인사해 내 친구 월드야</div>
<div>{ post }</div>
</div>
</div>
)
}
이렇게 중괄호 안에 데이터바인딩을 하고 싶은 변수명만 담으면 된다.
참고로 변수에 있던걸 html에 꽂아넣는 작업을 있어보이는 말로 데이터바인딩이라고 한다.
<h1 style="color : red"></h1>
이렇게 HTML에 style 속성을 넣고 싶다면 style={} 이런식으로 괄호 안에 자료형으로 넣어야 한다.
<h1 style={ {color : 'blue', fontSize : '30px'} }> 글씨 </h1>
{속성명 : '속성값'} 이렇게 넣어햐 한다.
font-size 처럼 속성명에 대쉬기호를 쓸 수 없으니 모든 단어를 붙여 쓰고 앞글자를 대문자로 바꿔준다. 이 방식을 camelCased 라고 한다.