React 블로그(state)

state

우선 블로그의 글을 쓰는 파트의 레이아웃을 디자인해봅시다.

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

function App(){
  // state로 변수 저장
  let [글제목,b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
      	// state로 저장한 변수 꺼내서 쓰기
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

(App.css)

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

언뜻 익숙해 보이는 코드지만, 맨 윗줄에 import {useState} from 'react' 와 아래의 let [글제목,b] = useState('남자 코트 추천')  과 같이 처음 보는 코드들이 있습니다.

이 코드들은 리액트의 state를 사용한 문법입니다.

 

리액트에서는 변수 대신에 state라는 것을 만들어서 데이터를 저장할 수 있습니다.

맨 윗줄에 import {useState} from 'react' 코드를 쓰면, 원하는 곳에서 useState('보관할 자료') 방식으로 변수 대신 자료를 저장하는 것이 가능합니다.

 

let [글제목, b] = useState('남자 코트 추천')

여기에서 처음의 '글제목' 이라고 쓴 것은 변수의 이름입니다.

뒤의 b는 잠시 뒤에 확인해보겠습니다.

 

 

state를 쓰는 이유

그렇다면 변수 대신에 왜 우리는 state를 만들어 써야 할까요.

state의 장점은 html을 자동으로 재렌더링 해주는 부분에 있습니다.

즉, state 에 변동이 생기면 html에서도 자동으로 변경이 된다는 뜻입니다.

그리고 state덕분에 사이트가 굉장히 부드럽게 동작이 된다는 장점까지 이어집니다.

 

state는 자주 변하는 데이터들에 저장하는 것이 좋은 관습이며, 잘 바뀌지 않는 데이터들을 굳이 state로 저장할 필요는 없습니다.

 

 

state에 array 자료 넣기

만들었던 레이아웃의 list를 3개까지 늘리고 싶습니다.

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

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

useState를 3번 써서 3개의 list 레이아웃을 만들어도 되지만, 

let [글제목, b] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ) 과 같이 useState 안에 array를 집어 넣어서 원하는 데이터를 뽑아 쓰는 것도 가능합니다.