React : state (만들기, 데이터 담기, 변경하기, onClick)

state 만드는 법

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

function App() {
  let [postTitle, a] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']);

  return (
    <div className="App">
      <div className='black-nav'><h4>블로그</h4></div>
      <div className="list">
        <h4>{ postTitle[0] }</h4> <!--쌍검사길드에서 닌자시작퀘 받기-->
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ postTitle[1] }</h4> <!--파판14 초보자 가이드 이벤트 진행안내-->
        <p>1월 25일 발행</p>
      </div>
      <div className="list">
        <h4>{ postTitle[2] }</h4> <!--귀여운 구부 꼬마친구를 받아보자-->
        <p>12월 30일 발행</p>
      </div>
    </div>
  );
}

1. 맨 윗줄에 import { useState } from 'react';를 쓰고
2. 원하는 곳에 useState('보관할 자료')를 쓰면 state에 자료를 잠깐 저장할 수 있다.
3. 저장한 자료를 나중에 쓰고 싶으면 let [a, b] = useState('보관할 자료');에 a 자리에 state 이름을 자유롭게 작명한다.
4. useState()를 쓰면 그 자리에는 [데이터1, 데이터2]같은 array가 남는데, 데이터1자리엔 '파판14 초보자~'자료가 들어있고 b 자리에는 state 변경을 도와주는 함수가 들어있다.

---

destructuring 문법 (자바스크립트)

위는 자바스크립트의 destructuring 문법인데, array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을 때 쓴다.

// 이렇게도 쓸 수 있지만
let array = ['Kim', 20];

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

// 이렇게 더 많이 쓴다.
let [name, age] = ['Kim', 20]

왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 변수가 생성된다.

---

변수 말고 state 쓰는 이유

state는 변동사항이 생기면 데이터바인딩되어있는 state를 쓰는 html도 자동으로 재렌더링해준다.

-> 바뀌지 않는 데이터들은 굳이 state로 저장할 필요 없다.
    (+ html에 표기가 필요없는 데이터도)

---

onClick 이벤트

• onClick 이벤트 안에는 함수만 넣어야 한다. ( () => {console.log(1)} 형태로 넣어도 문제없음)

let [like, b] = useState(0)
function likeBtn(){
  console.log(1);
}

return (
<div className="App">
  <div className="list">
    <h4>{ postTitle[0] }  <span onClick={ likeBtn }>👍</span> { like } </h4>
    <p>2월 17일 발행</p>
  </div>
  <div className="list">
    <h4>{ postTitle[0] }  <span onClick={ () => {console.log(1)} }>👍</span> { like } </h4>
    <p>2월 17일 발행</p>
  </div>
</div>
);
}

---

state 변경하는 법

state 두번째에 들어간 state 변경함수로 변경한다.

* 함수 안에 등호(=)는 쓰면 안된다.

function App() {
  let [like, clickLike] = useState(0)

  return (
    <div className="App">
      <!--이건 됨.-->
      <div className="list">
        <h4>{ postTitle[0] }  <span onClick={ ()=>{ clickLike(like+1) } }>👍</span> { like } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
      <!--이건 안됨!-->
        <h4>{ postTitle[0] }  <span onClick={ ()=>{ clickLike(like = like+1) } }>👍</span> { like } </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

---

출처 : 코딩애플 https://codingapple.com/