React로 간단한 홈페이지 만들기(JSX 문법, state)

코딩애플님의 2022 리액트 강의 2~6강을 참고해서 React로 간단한 홈페이지 만들기를 해보았다!

 

무료강의가 6강까지만 있어서 완성도 있는 홈페이지는 안나왔지만,

React 입문 느낌으로 해보기 좋았다

 

이 글 이후부터는 "리액트를 다루는 기술" 책을 바탕으로 공부할 계획이다!

 

 

JSX 문법

---

기본 셋팅

• App.js에서 div 하나만 남기고 지우기

 

JSX 문법

1. class 넣을 땐 className으로 해야함
   • class 선언과 혼동될 수 있기 때문
2. 변수 넣을 땐 {중괄호} : 데이터 바인딩
   • 태그 사이 뿐만 아니라 태그 안에도 사용 가능
   • (ex)
3. style 넣을 땐 style={{스타일명:'값'}}
   • 카멜케이스로 작성(font-size(X), fontSize(O))

 

참고

• error message는 팝업으로 뜨기도 하고, console 창에서도도 확인 가능

 

코드

import './App.css';

function App() {

  let post = '강남 우동 맛집';


  return (
    <div className="App">
      <div>
        <div className="black-nav">
          <h4 style={{fontSize : '20px'}}>블로그임</h4>
        </div>
        <h3>{ post }</h3>
      </div>
    </div>
  );
}

export default App;

  <!-- style.css -->

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

 

 

결과

 

---

State

---

• 자료를 잠깐 저장할 때
  • 1. 변수 사용(let, const)
    2. State 사용

 

State 사용법

import { useState } from 'react';

function App() {let [a,b] = useState('남자 코드 추천')}

1. import{useState} from 'react'
2. useState(보관할 자료)
3. let[a,b]

• a : state에 보관한 자료, b : state 변경을 도와주는 함수
• 데이터 바인딩 할 때 인덱스 사용 가능
  • ex) <h4>{글제목[0]}</h4>

 

변수와 State의 차이점

• 변수
  • 변수가 변경됐을 때, 데이터 바인딩 한 html 부분에 자동반영되지 않음
• State
  • 값이 변경되면 html이 자동으로 재렌더링됨
• 자동반영된다고 State가 무조건 좋은 것은 아님!
• 사이트명 등 자주 변경하지 않는 것은 굳이 State로 만들 필요 없음

 

참고 : Destructuring 문법

let num = [1,2];

• num 안에 있는 걸 변수로 뽑고 싶을 때 사용let a = num[0] let c = num[1]이런식으로 뽑아도 되지만

 

• let [one, two] = [1,2];
• 이렇게 표현도 가능함. 이게 Destrcting 문법

 

참고 : 태그 병렬 금지

• 코드를 return() 안에 작성할 때, return() 안에 병렬로 태그 2개 이상 기입 금지
• return( <div></div> <div></div> )
• 위처럼 짜면 오류 발생

 

코드

import './App.css';
import { useState } from 'react';


function App() {

  let post = '강남 우동 맛집';
  let [글제목,b] = useState(['남자 코트 추천', '강남 우동맛집','파이썬독학']);



  // Destructuring
  let num = [1,2];
    // num 안에 있는 걸 변수로 뽑고 싶을 때 사용
  let a = num[0]
  let c = num[1]
    // 이런식으로 뽑아도 되지만
  let [one, two] = [1,2];
    // 이렇게 배정할 수도 있음. 이게 Destructuring


  return (
    <div className="App">
      <div>
        <div className="black-nav">
          <h4 style={{fontSize : '20px'}}>ReactBlog</h4>
        </div>
        <div className="list">
          <h4>{글제목[0]}</h4>
          <p>12월 17일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>12월 17일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>12월 17일 발행</p>
        </div>
      </div>
    </div>
  );
}

export default App;

 

결과