[React] state사용하기

1. 먼저 블로그 레이아웃을 만들어 준다.

function App() {

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

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <div className='list'>
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

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

.black-nav {
  display: flex;
  background: #000;
  width: 100%;
  color: white;
  padding-left: 20px;
}

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

2. state를 사용해 자료 저장

let post = '~~'이런식으로 변수에 데이터를 저장할 수도 있지만, 리액트에선 변수 말고 state를 만들어서 데이터를 저장 해둘수 있다.

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

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <div className='list'>
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

맨 윗줄에 import { useState } from 'react'; 하고 원하는 곳에 useState('보관할 자료')를 쓰면 state에 자료를 잠깐 저장할 수 있다.

🔆 state 만드는 법

1. import{ useState }
2. useState(보관할 자료)
3. let[작명, 작명]
   작명1 = state에 보관했던 자료 나옴, 작명2 = state 변경 도와주는 함수

3. useState 활용해서 블로그 제목 3개의 데이터 바인딩 해오기

function App() {

let [글제목, b] = useState(['남자 코트 추천', '강남 우동 맛집','리액트 공부']);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </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>
  );
}

array 자료를 이용해 텍스트를 각 제목에 넣어주었다.

한곳에 여러개의 문자를 집어 넣고 싶으면 []대괄호 안에 문자들을 넣고 콤마로 구분해주면 된다.
이때 array 자료에서 원하는거만 뽑고 싶으면 array[0] 이런식으로 작성해주면 왼쪽에서부터 0번째 자료가 나온다.

⚡인덱싱: 글제목 자료들 중에 첫번째 자료만 가져오고 싶다 ->[0]

🟩 왜 state를 써야할까?

일반 변수는 갑자기 변경되면 html에 자동으로 반영이 안된다. 그러나 state는 갑자기 변경되면 state 쓰는 html도 자동으로 재렌더링을 해준다.
So, 자주 변경될거 같은 데이터들을 state에 저장했다가 html에{데이터 바인딩} 하면 된다.

---

• 추가

let  num = [1, 2];
let [a, c] = [1, 2] // Destructuring 문법: array안에 있는 자료를 각각 변수로 뽑아주는 문법