[React] 블로그 제작(1)

ubin·2023년 8월 3일

JSX문법 React blog

React

목록 보기

2/9

🖥 최종 출력 화면:

📝 체크리스트

className으로 상단바 생성
변수 선언을 통해 블로그 글 제목 및 발행일 생성

위의 체크리스트를 수행하려면 우리는 JSX 문법을 알아야 한다

📍JSX 문법

class 선언시, <tag className=””>으로 적어야 함
css 파일 사용시, 상단에 import ‘css파일 경로’; 작성해야 함
변수 선언시, let var const 사용해서 선언 가능
변수 넣을시(데이터 바인딩), {변수명}에 미리 선언한 변수명을 넣어야 함
style 속성 넣을시, <tag style = {{스타일명 : '값1', 스타일명 : '값2', ...}}> 로 넣어야 함
❗️font-size와 같은 중간에 -기호는 인식 불가로, 제거후 이어지는 문자열의 맨 앞자리 문자는 대문자로 작성 font-size → fontSize
return() 안에는 병렬로 태그 2개 이상 작성 금지
❗️return() 안에는 하나의 태그로 시작해서 하나의 태그로 끝나야 함
만약 병렬로 태그를 사용하려면, 상위에 <div></div> 태그 또는 <></>로 병렬 태그를 묶어야 함

📍className으로 상단바 생성하기

🖥 출력 화면:

먼저 자바스크립트의 부분은 아주 간단한데,
<div className="App"> 속에 <div className="menu-bar">를 생성해서 <h4>원하는 제목을</h4> 넣어주었다.
이렇게 간단하게 작성할 수 있는 이유는 html이 아니라 JSX 언어를 사용하기 때문!

function App(){
  return (
    <div className="App">
      <div className="menu-bar">
        <h4>원하는 제목 넣기</h4>
      </div>
    </div>
  )
}

CSS 부분은 위의 사진처럼 꾸며주었고,
적용하기 위해선 이 파일을 App.js 상단에 import 해주어야 한다.

import './App.css'; /* App.js 상단에 작성 */

.menu-bar {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

📍변수 선언을 통해 블로그 글 제목 및 발행일 생성하기

🖥 출력 화면:

문법에도 작성되어 있듯이, 변수 선언은 총 세가지로 할 수 있지만 보통은 let 키워드를 많이 사용한다.

변수 선언은 let 변수명 = '값';으로 선언한다.

let post1 = 'JSX 기초 문법';
let post2 = 'state 문법';
let post3 = 'react로 블로그 만들기';
let date = '8월 2일 발행';

이렇게 총 4개의 변수를 선언하여, <div> 속에 넣어주려고 한다.
변수 사용은 {변수명}으로 값을 넣어줄 수 있다.

//자바스크립트 부분
<div className='list'>
   <h4>{post1} </h4>
   <p>{date}</p>
</div>
<div className='list'>
   <h4>{post2} </h4>
   <p>{date}</p>
</div>
<div className='list'>
   <h4>{post3} </h4>
   <p>{date}</p>
</div>

//CSS 부분
.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}