리액트 블로그-1. JSX 기본문법 (class, 데이터바인딩, style)

리액트 프로젝트를 본격적으로 열고 코드를 작성하면 된다.

vs코드에서 터미널을 열고(단축키 ctrl + ` 또는 ctrl + shift + `)

npm start를 입력

 

App.js에 코드를 작성하면 되는데 div만 남긴 아무것도 없는 상태에서 시작 하면 된다.

헤드에 타이틀 등을 바꾸려면 public에 index.html을 수정해준다.

요렇게 아이콘도 수정해줌

 

자바스크립트이지만 태그가 적용되는 이유는 html이 아니라 JSX라는 문법이기 때문

JSX는 JavaScript XML의 약자로, 자바스크립트에서 HTML 문법을 사용해 UI를 설계할 수 있다.

원래 JS에서는 (JavaScript 줄여서 부르겠음)

const element = React.createElement('h1', null, 'Hello, World!');

이런식으로 태그를 만들어줘야했는데, 

const element = <h1>Hello, World!</h1>;

이렇게 JSX 코드로 간단하게 쓸 수 있다.

 

---

상단 메뉴 만들기

 

JSX 문법1. class 지정할 땐 className

div 태그를 만들고, 스타일은 App.css에서 코드를 작성할 수 있다.

.black-nav {
  display: flex;
  background-color: black;
  width: 100%;
  color: white; /*글씨색*/
  padding-left: 20px;
}

평소 html, css와 마찬가지로 작성해준다.

단, JSX에서는 class가 아니라 className으로 속성을 지정해준다.

(class는 자바스크립트에서 예약어이기 때문)

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h4>nalmi's blog</h4>
      </div>
      <h4>블로그 글 제목</h4>
    </div>
  );
}

export default App;

App.css를 import해줬기 때문에 적용이 잘 되고 있음. (파일 경로)

---

2. 변수를 넣을 땐 중괄호 사용 { 변수명 }

위 코드처럼 변수로 된 제목 같은 걸 가져오는 경우가 대부분인데

나중에 데이터를 가져오겠지만 post라는 변수를 임시로 만들면

원래 JS에서는

document.querySelector('h4').innerHTML = post;

이렇게 해당 태그를 찾아서 값을 넣어주어야 했는데

 

JSX는 중괄호를 사용하면 된다.

  let post = '대전 찐 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={ post }>nalmi's blog</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );

속성에도 중괄호 사용가능 -> 데이터 바인딩

브라우저에서 요소를 확인해보면 잘 적용이 되어있다.

---

3. style 넣을 땐 style={{스타일 명 : '값'}}

원래 html에선 

  <h4 style="color : pink">nalmi's blog</h4>

이런식으로. 근데 이렇게 쓰면

The `style` prop expects a mapping from style properties to values, not a string.

이런 에러를 마주할 수 있다.

 

스타일 속성 안에선 무조건 중괄호 안에 작성.

        <h4 style={ {color : 'pink', 'fontSize' : '16px'} }>nalmi's blog</h4>

이렇게 오브젝트(객체) 형식으로 작성해야 한다. 

• style={ ... }: JSX에서 중괄호 {}는 JavaScript 표현식
• { color: 'pink' }: JavaScript 객체로 작성된 스타일

JSX는 역시 JS를 기반으로 하기 때문에 JS 객체 문법을 따라 객체의 속성-값 쌍을 사용해 스타일을 작성한다.

값을 여러개 넣으려면 보통 객체처럼 , 로 구분

 

(font-size로 사용하려면 기호가 있어서 ''꼭 써주고, 혹은 camel case로 뒤의 첫단어를 대문자로 적어주면 적용이 잘 된다.)

 

 

 

 

https://youtu.be/qocQ7ekeMI4?si=ltqr1-A9tgHzk38h