중요한 데이터는 변수말고 state에 담습니다

0:00 글 목록 레이아웃 대충 만들기

1:40 자료저장할 땐 변수말고 state써도 되는데 

4:25 (참고) destructuring 변수생성 문법

6:28 state 쓰는 중요한 이유 

10:09 빡대가리식 정리와 오늘 숙제

오늘의 숙제 : 

위 사진처럼 블로그 글 목록 3개를 html 레이아웃을 잘 짜서 만들어오시고

제목부분에 들어갈 3개의 데이터는 state에 저장해본 후에 html에 집어넣어보십시오 (데이터바인딩하세요)

변수에 잠깐 데이터 저장하고 html에 {데이터바인딩}도 할 수 있다고 했는데 

중요한 데이터를 저장할 땐 변수 대신 state를 만들어씁니다.

state는 왜 쓰는지, state는 어떻게 만들어서 데이터를 저장하는지 알아봅시다.

일단 블로그 글 레이아웃을 만들어봅시다

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 posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데

리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다. 

이번엔 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 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 

let array = ['Kim', 20];

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

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

변수명을 약간 더 직관적으로 작명하면

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

이렇게 하면 조금 더 직관적으로 이해할 수 있겠군요.

글제목이라는 변수에는 '남자 코트 추천'이라는 자료가 들어간댔으니

한번 html에 중괄호로 {글제목} 넣어보십시오. 진짜 나오지 않습니까 

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를 가져다 쓰는 것임 

잘 생각해보면 state도 용도는 그냥 변수랑 똑같습니다. 자료 잠깐 보관하는게 끝인데 

그럼 변수 만들어 쓰면 되는거지 왜 굳이 state 만들어쓰냐고요?

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

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

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

▲ let post 변수에 있던걸 {post} 이렇게 데이터바인딩 해놨다고 가정해봅시다. 

근데 갑자기 post 변수에 있던걸 '강남 우동 맛집'  ->  '강남 고기 맛집' 이렇게 바꿨습니다. 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게하죠?

직접 여러분이 "변수내용 바뀌었으니까 html도 고쳐주세요" 라고 귀찮게 코드짜면 됩니다. 

쌩자바스크립트는 원래 그래야함 

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

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

▲ 이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다. 

근데 갑자기 state에 있던걸 '남자 코트 추천'  -> '여자 코트 추천' 이렇게 바꿨습니다. 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게 하냐고요? 

state자료는 그럴 필요 없습니다. 여러분이 개입 안해도 자동으로 html도 바뀝니다.  

state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줘서 그렇습니다. 

그럼 뭐가 좋겠습니까

- 그리고 UI 기능 개발도 매우 편리해지고

- OT강의에서 설명드렸던 사이트처럼 스무스하게 동작하는 것임 

Q. 그럼 블로그 로고 같은 그런 데이터도 state로 만들어두고 {데이터바인딩} 할까요?

그러셔도 됩니다. 하지만 블로그 로고명은 거의 바뀌지 않죠?

바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없습니다.

state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것인데

로고명은 아예 바뀔 일이 없으니 의미가 없겠죠.

state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습입니다.

오늘 수업을 빡대가리 레벨로 정리해드리면 

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓으십시오

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됩니다. 

실은 지금은 변수나 state나 별 차이 없어보이는데

다음 시간에 state 데이터를 변경하는 법을 한번 배워서 진짜 앱처럼 스무스하게 바뀌는지 실험해봅시다.

일단 오늘 숙제나 해오십시오