리액트 3강: state쓰면 좋은점?

* 자료 잠깐 저장할 땐 변수(let, var, const) 사용

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

- React에서 자료 잠깐 저장할 땐 state 써도 됨.

 

* useState 만드는 법

1) useState라고 입력하고 엔터를 치면, 상단에

import { useState } from 'react'; 라고 자동 입력됨

2) useState(보관할 자료) 입력 후
3) let[작명, 작명]

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

 

* useState 사용법

이런식으로 변수처럼 사용이 가능, 하지만 중괄호 { } 로 표기해야 함  

<h4>{ a  }</h4>

여기서 
a는 '남자 코트 추천'을 가르키고,
b는 변경할 내용을 담음

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

 

* 참고 (destructuring / 구조를 나누는 것 )

let num = [1,2];
let a = num[0];  << a = 1이 되고
let b = num[1];  << b는 2가 됨


let [a,c] = [1,2]
a는 1이되고 c는 2가 됨

 

** 변수 대신에 state 사용하는 이유?

일반 변수는 갑자기 내용이 변경되면, html에 자동으로 반영 안됨.

let post = '강남 우동 맛집' 에서
let post = '역삼 우동 맛집' 으로 변경 되는 경우
새로고침을 해야지만 변경이 됨 !

function App() {

let [글제목 ,b] = useState('남자 코트 추천');  << 여기 글제목 내용이 '여자 코트 추천'으로 변경이 되는 경우,
                                                  state쓰던 html은 자동 재렌더링됨 !
                                                  
  return (
    <div className="App">
    <div className="black-nav">
      <h4>블로그임</h4>
    </div>
    <div className = "list">
      <h4>{ 글제목  }</h4>
      <p>5월 10일 발행</p>
    </div>
    </div>
  );
}

 

* state 언제 써야하는지?

- 변동시 자동으로  html에 반영되게 만들고 싶을 때 !

- 사이트 로고처럼 변동이 적은 것은, state로 만들기보다는 변수로 만들든지 하드코딩(그냥 글로 작성) 하는 게 나음 !

 

* 글제목 3개 만들기 (state로)

( <<< 표시로 체크 되어 있음)

function App() {

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

let[글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아이 코트 추천'])

  return (
    <div className="App">
    <div className="black-nav">
      <h4 style = { {fontSize: '20px'}}> ReactBlog </h4>
    </div>
    <div className = "list">
      <h4>{ 글제목[0] }</h4>   <<<  '남자 코트 추천'
      <p>5월 10일 발행</p>
    </div>

    <div className = "list">
      <h4>{ 글제목[1] }</h4>  <<<  '여자 코트 추천'
      <p>5월 11일 발행</p>
    </div>

    <div className = "list">
      <h4>{ 글제목[2]  }</h4>  <<< '아이 코트 추천'
      <p>5월 12일 발행</p>
    </div>

    </div>
  );
}