[리액트] 중요한 데이터는 변수말고 state에 담는다.

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

return () 안에는 병렬로 태그 2개 이상 기입금지

 

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, var, const 변수명)

리액트에서 자료 잠깐 저장할 땐 state 써도 됩니다.

 

이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데

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

이번엔 state를 이용해 데이터를 잠깐 저장해보도록 합시다.

 

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

function App(){
 
 //state 만드는 법
 //{a}를 <div> 태그 안에 쓰면 저장되어있는 값인 "남가 코트 추천"이 나옴
  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 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 

 

a는 state에 보관했던 자료가 나옴. 변수와 용도가 똑같음. 

b는 state 변경을 도와주는 함수.

 

(참고) Destructuring 문법

//배열
let num = [1, 2];
let a = num[0]; //1
let a = num[1]; //2

//좀 더 편하게 쓸 수 있는 문법
//오른쪽과 왼쪽 깔맞춤
let [a, c] = [1, 2]; //a라는 변수는 1, c라는 변수는 2가 됨.

let [글제목, b] = useState('남자 코트 추천');
//오른쪽에 [?, ?] 이런 거 남음. = ['남자 코트 추천', 함수] 남음.

 

 

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

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 기능 개발도 매우 편리해지고

- 사이트가 스무스하게 동작하는 것임 

 

 

 

 

 

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

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

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

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

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

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

 

 

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

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

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

 

 

 

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

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

 

 

 

 

오늘의 숙제 : 

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

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

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번 써도 state 3개 만들 수 있는데

그게 귀찮으면 array자료를 이용하면 됩니다.

한 곳에 여러개의 문자를 집어넣고 싶으면 [ ] 대괄호안에다가 문자들 끼워넣고 콤마로 구분해주면 됩니다.

그걸 array자료라고 부릅니다. 

그래서 {글제목} 이렇게 쓰면 ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] 이거 남음 

 

array자료에서 원하는거 하나만 뽑고 싶으면

array이름[0] 이러면 왼쪽에서 부터 0번째 자료가 나옵니다

array이름[1] 이러면 왼쪽에서 부터 1번째 자료가 나옵니다