리액트 TODO 리스트 만들기 : #3 목록 만들기

# 변수 이용

App.css

...생략
.list{
  margin-top:30px;
  text-align:left;
  padding-left:20px;
  padding-right:20px;
}
...생략

 

 

 

 

App.js

import logo from './logo.svg';
import './App.css';
 
function App() {
  let posts = '강남 고기 맛집';
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
     <div className='list'>
      <h3>{posts}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
    </div>
  );
}
 
export default App;
 

▲ 결과!!

 

 

 

 

 

 

 

 

 

# useState 를 이용

state

1. 변수 대신 쓰는 데이터 저장공간

2. useState() 를 이용해 만들어야함.

3. 문자, 숫자, array, object 다 저장가능

 

state 에 데이터 저장하는 이유 : 웹이 App 처럼 동작하도록 하게 하려고.

state 는 변경되면 HTML 이 자동으로 재렌더링이 됨.

그냥 변수는 변경되어도 자동 재렌더링이 안됨.

 

이게 무슨말이냐면, 변수 사용시 let a = '가' 이게 a = '나' 로 변경하면, 사이트를 새로고침해야 재반영 되는데

state를 사용하면 새로고침 하지 않고도 화면이 변경된다는 얘기다. 이게 Web-app 의 장점!!

자주 바뀌는, 중요한 데이터는 변수가 아닌 state 로 사용하면 좋다.

 

 

 

 

App.js

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목1,글제목변경1] = useState('가요 인기 순위'); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
  let [글제목2,글제목변경2] = useState('화장품 브랜드 순위'); 
  let [글제목3,글제목변경3] = useState('패딩 인기 순위');
 
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
     <div className='list'>
      <h3>{글제목1}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목2}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목3}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
    </div>
  );
}
 
export default App;
 

 

 

▲ 결과!!