React 18 시작하기 (3) - 중요한 데이터는 state에 보관

html 문법만 사용한다면, 정적인 웹 페이지 밖에 만들 수 없습니다. 서버 등에서 가져온 데이터를 이용해 동적인 웹 페이지를 만들려면 어떻게 해야 할까요?

1. “list" 라는 className 을 새로 지어, 블로그의 게시물 하나를 가장하고 div 태그를 하나 또 만들어주었습니다. 하지만, 여기서 return 문 안에 들어가는 태그는 오직 하나여야만 한다는 규칙이 있습니다. 즉, 병렬로 태그를 2개 이상 사용할 수 없습니다.

import logo from './logo.svg';
import './App.css';

function App() {

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

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

div {
  box-sizing: border-box;
}

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

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 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);
  }
}

2. 그런데 ’글제목‘ 이라는 부분과 ’2월 17일 발행‘ 이라는 부분이 동적으로 바뀌었으면 하니, 이를 state 로 만들어주겠습니다. state 를 만드는 방법은 let [a, b] = useState("남자 코트 추천"); 과 같이 선언해 주면 됩니다. 또한, 선언 이후에는 상단에 useState 라이브러리를 import 해주어야 합니다.

• import { useState } from 'react';
• useState(보관할자료)
• let[작명, 작명]

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

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState('남자코트 추천');

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>
      <div className="list">
        <h4>{ title }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

3. 위에서 a는, state에 보관할자료이며, b는 state 변경을 도와주는 함수입니다. 코드의 예시처럼 b에는 state에 set을 붙여 setTitle 과 같이 작명해주는 것이 관행입니다.

오늘은 state 사용법에 대해 알아보았습니다. state 를 사용하지 않은 일반 변수는 갑자기 변경되면 html에 자동으로 반영되지 않습니다. 그러나, state 는 갑자기 변경되면 자동으로 html에 재렌더링됩니다. 하지만 모든 것을 state 로 만들지는 않고, 자주 변경될 것 같은 부분만 state 로 두는 것이 좋습니다.