[코딩애플] 기초 3강 숙제, state 활용하여 블로그 UI 제작

1. 실행화면

 

실행 화면

 

2. 코드

import React, { useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '광교 횟집 추천']);

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] }</h3> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3> 
        <p>2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3> 
        <p>2월 19일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

export default App;

 

3. 기타

▶ 터미널에 뜨는 warning - eslint가 잡아주는 문법 체크 사항(변수 써두고 안 사용했어요~ 등)

보기 싫으면 import 보다 위에 eslint-disable 작성.