[react] 리액트에서 레이아웃 만드는 문법

이제 코드를 작성해보자!

처음 app.js를 열면 className  = App인 div 안에 뭐가 막 있는데 일단 다 지우고 div하나만 남기고 시작하자

<div className="App">
</div>

저장하면 이제 흰 화면만 나온다.

그상태로 시작하면 된다!

 

이전에 사용하던 html과 똑같이 작업하면 되는데,,,

어떻게 js파일인데 어떻게 html이 먹히지?! 싶은데, 사실 우리가 작성할건 html이 아니라 jsx이다 (js에서 html대신 사용할 대용품)

이전에는 js파일 안에서 div를 새로 만들려면 react.createElement('div', null, 'hi hi')와 같이 작성했어야 했다.

하지만 넘 길기도 하고 복잡해보여서 굉장히 사용하기 꺼려졌다...

지금은 jsx를 개발하신 분 덕분에 사용해서 이전 html처럼 간단히 만들 수 있게 되었다. 감사 인사를 한번씩 올로도록 하자 (?)

 

 

 

리액트 문법 1

기존에 클래스명을 부여할 때 class='main'과 같이 작성했지만,

react에서는 className='main'과 같이 className으로 작성해야 한다

→ js안에서는 그냥 class라고 하면 다른 명령어로 인식되기 때문

 

css를 주고싶으면 App.css에서 주면 된다!

새로운 css파일을 적용하고 싶으면 import해야함! 

ex) import './App.css'; 

 

 

리액트 문법 2

변수를 넣을 때 중괄호를 사용하는 중괄호문법이 있다.

 

예를 들어 블로그 새 글 제목을 작성하려는데, 하드코딩도 가능하지만 실제 프로젝트에서는 보통 서버에서 글을 가져와 화면에 보여줄 것이다.

그래서 일단은 변수를 하나 만들어서 적용해보자

 

import logo from './logo.svg';
import './App.css';

function App() {
    let post = '게시글의 제목입니다.'
    return (
        <div className="App">
            <h3></h3>
        </div>
    );
}

export default App;

 

h3태그 안에 넣고싶다.

이전에는 document.querySelector('h3').innerHTML = post 와 같이 길게 작성했어야 했다.

하지만 리액트는 중괄호 하나면 된다.

<h3>{post}</h3>

중괄호는 어디에나 들어갈 수 있다.

예를 들면 className이나 id값에도 아래와 같이 사용할 수 있다.

<h3 id={postId}>{post}</h3>

 

리액트 문법 3

html 태그 안에서 직접 스타일을 줄 때 중괄호 안에 오브젝트 형식으로 넣어줘야 한다.

그리고 font-size와 같이 하이픈으로 연결된 스타일 명은 camel case로 작성해줘야 한다.

→ js에서 -(하이픈) 이 뺄셈으로 계산되기 때문이다 ㅎㅎ

<h3 style={{color: 'red', fontSize: '16px'}}>{post}</h3>