[React : 03] state를 이용해 글 목록 만들기

 

---

 

 

변수에 데이터를 저장하고 데이터 보관할 때 옵션이 두 개가 있다.

1 데이터는 변수에 넣거나

2 state를 사용하거나

 

 

상단 import에 아래를 추가한다.

import React, { useState } from 'react';

- 리액트에 있는 내장 함수를 사용

 

let [a, b] = useState('남자 코트 추천');

- 이 함수를 실행하면 [a, b] 이렇게 두 개의 데이터가 있는 array가 남는다.

- ES6 신 문법 : destructuring 문법

- 설명 전에 아래 설명 참고

 

var [a, b] = [10, 100];

이 두 개의 데이터를 각각의 변수에 담고싶다면?

a에는 10을 넣고, b에는 100을 넣는다. 

이것이 바로 destructuring(디스트럭터링)

 

let [글제목, 글제목변경] = useState('남자 코트 추천'); //실제로 쳐도 나옴

- [ state 데이터, state 데이터 변경 함수 ]

- a = '남자 코트 추천'

- b = '남자 코트 추천' 이라는 데이터를 변경하는 함수 하나가 들어가 있다.

- 그러니까 [a, b]가 있는 변수를 만들고, useState에 있는 두 개의 변수를 각각 집어 넣는다는 뜻

 

state

1. 변수 대신에 쓸 수 있는 저장공간

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

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

 

 

-이렇게도 사용가능하다.

let [글제목, 글제목변경] = useState('남자 코트 추천');
let [글제목2, 글제목변경2] = useState('남자 코트 추천2'); //이렇게도 사용가능

<div className='list'>
    <h3> { 글제목 } </h3>
    <p>2월 17일 발행</p>
    <hr />
</div>

<div className='list'>
    <h3> { 글제목2 } </h3>
    <p>2월 17일 발행</p>
    <hr />
</div>

---

 

- 문자, 숫자, array, object 다 저장가능

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

function App() {

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

  let posts = '강남 고기 맛집';
  let ftStyle = { color : 'wheat', fontSize : '30px'}

  return (
    <div className="App">
      <div className='black-nav'>
        <div style={ ftStyle }>개발 Blog</div>
      </div>
      <div className='list'>
        <h3> { 글제목 } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;

<h3> { 글제목[1] } </h3>

array로 저장해두고 n번째만 뽑아서 사용할 수도 있다.

그러면 글제목 자리에 강남 우동 맛집 이것만 뜸

 

---

여기서 의문점은?

그냥 변수를 사용하면 되지 왜 state를 만들어서 사용할까요?

 

수정이나 정렬 등을 통해서 글 제목이 변경될 때

state로 데이터를 담아두면 새로고침 없이도 

HTML이 자동으로 재렌더링을 한다.

그냥 변수로 만들었을 땐 재렌더링이 되지 않음!!

 

그렇게 스무스한 웹페이지를 만들기 위해서

웹이 App처럼 동작하게 만들기 위해서 사용한다.

이것이 가장 중요한 웹 App을 만드는 원칙이다.

 

---

블로그 제목도 state로 설정할 수 있지만 웹앱이랑은 별로 상관 없는 내용이다. 수시로 바뀌는 정보가 아니라 거의 바뀌지 않는 변수 라서 하드코딩을 해도 상관 없다. 그런데 자주 바뀌는 중요한 데이터 수정이나 정렬 등을 수시로 하는 데이터의 경우는 그냥 변수가 아니라 state로 저장해서 사용하는 게 좋다.

 

---

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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '응암 고기 맛집']);

  let ftStyle = { color : 'wheat', fontSize : '30px'}

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

      <div className='list'>
        <h3> { 글제목[1] } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>

      <div className='list'>
        <h3> { 글제목[2] } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

body {
  font-family: "nanumsqure";
}

.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

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

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}