state, destructuring 문법

블로그 글 레이아웃 만들어보기

function App(){
 
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

(App.css)

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

state 사용해보기

• 전에는 let post=" " 이런식으로 데이터를 저장했지만 react에서는 state를 사용하여 데이터를 저장할 수 있음

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

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

• 맨 윗줄에 import {useState} from 'react' 선언
• 원하는 곳에서 useState('보관할 자료') 쓰면서 state에 저장
• let [a,b]=useState('남자 코트 추천') 이런식으로 선언해두고 나중에 {a}로 데이터 바인딩을 통해 남자 코트 추천을 사용할 수 있음

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

state 사용하는 이유

• state는 변동사항이 생기면 state 쓰는 html도 자동으로 재렌더링 됨

function App(){
  let post = '강남 우동 맛집'

  return (
    <h4>{ post }</h4>
  )
}

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

  return (
    <h4>{ 글제목 }</h4>
  )
}

• 이번엔 state를 하나 만들어 {글제목} 이렇게 데이터 바인딩을 해놨다고 가정
• state에 있던 남자가 여자로 바뀌면 html에 수정할만한 코드가 필요가 없이 알아서 자동으로 재렌더링됨.
• 따라서 UI 기능 개발이 매우 편해지고, 평소의 사이트처럼 동작이 매끄러움

JavaScript destructuring 문법

• array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을 때 쓰는 문법

let array = ['Kim', 20];

let name = array[0];
let age = array[1];

이렇게 작성해도 되지만

let [name, age] = ['Kim', 20]

• 이렇게 작성하여 name=Kim, age=20이라는 변수가 생성
• 왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 알아서 변수 생성