[React] state

state

변수는 값을 바꾸면 바로 적용되고 리렌더 될때마다 초기화된다.

state가 바뀌면 UI가 다시 비동기적으로 렌더링된다.(다시 그려줌)

state를 바꾸는 함수들을 모아놨다가 함수가 끝나면 차근차근 실행한다. set함수를 하고 바로 그 state를 이용하면 계속 그전의 값이 나온다.

클래스형 컴포넌트에서의 state 초깃값은 객체의 형태를 넣어 주어야하지만

useState는 반드시 객체가 아니어도 상관없으며 자유형태

State 만들기

import React, { useState } from "react";
import "./App.css";

function App() {
  // let post = "강남 우동 맛집";
  //자료를 잠깐 저장할때는 변수
  // js에서 변수에 있던 자료를 html에 넣고 싶으면
  // document.querySelector('h4').innerHTML = post;

  let [글제목, 글제목변경] = useState([
    "겨울 옷 추천",
    "서울 맛집 추천",
    "도서 추천",
  ]);

  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그</div>
      </div>
      <div className="list">
        <h4>{글제목[0]}</h4>
        <p>12월 30일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>12월 30일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>12월 30일 발행</p>
      </div>
    </div>
  );
}

export default App;

왜 state 를 사용해?

state는 변경되면 쓰던 html 은 자동 재렌더링 됨.

따라서 변동시 자동으로 html 반영되게 만들고 싶으면 사용하면 된다.

state 변경하는 법

let [bap, addBap] = useState("배고파");

<span onClick={()=>{addBap("밥먹어")}}>🍚{bap}</span>

좋아요 버튼을 만들어 보자

let [like, addLike] = useState(0);

<span onClick={()=>{addLike(like+1)}}>❤️{like}</span>

주의: state는 등호로 변경금지
예시: 이런 거 안됨

let [like, addLike] = useState(0);

<span onClick={()=>{like = like + 1}}>👍</span>{like}

그러면…글이 여러개 라면 어떻게 만들어야할까?

let [like, addLike] = useState[(0,0,0)];

<h4>
        {글제목.map(function (a, i) {
          return (
            <div className="list" key={i}>//반복생성한 UI 마다 유니크한 키값이 필요하다
              <h4>
                {글제목[i]}
                <span
                  onClick={() => {
                    let copy = [...like];
                    copy[i] = copy[i] + 1;
                    addLike(copy);
                  }}
                >
                  👍
                </span>
                {like[i]}
              </h4>
              <p>12월 30일 발행</p>
            </div>
          );
        })}
      </h4>

let [like, addLike] = useState(0);

  function 좋아요함수(a) {
    let copy = [...like];

    copy[a] = copy[a] + 1;
    addLike(copy);
  }

<button onClick={()=>{ 좋아요함수(i) }}/>

function App() {
	let counter = 0;
	const [counter2,setCounter2] = useState(0);
	const increse = () => {
		counter = counter + 1;
		setCounter2(counter2 + 1);

		console.log("counter는 ${counter} counter2 state는 ${counter2}")
	}
}

→ 작동하는 원리

1. 유저가 버튼을 클릭

2. counter+ 1 = 1

3. setState 함수 호출

4. console.log 실행될때

   → 변수 값은 1로 보이고 state 값은 아직 안 변했기 때문에 그전의 값이 보인다.

   → 함수 끝

   → app 다시 리랜더(re render 할 때마다 초기화된다.)

   → let counter = 0 을 거치면서 counter 값은 다시 0으로 초기화

   → 업데이트된 state 값이 보인다.

array/object 특징

array/object 담은 변수에는 화살표만 저장됨

state가 array/object 이면 독립적 카피본(shallow copy)을 만들어서 수정해야한다.

array를 수정했지 변수에 있던 화살표는 수정이 안된다.

글수정 버튼을 만들어 보자

let [글제목, 글제목변경] = useState(["겨울 옷 추천","서울 맛집 추천","도서 추천",]);

<button
        onClick={() => {
          let copy = [...글제목]; 
//왜? ...은 괄호 벗겨주세요! 이러면 화살표도 달라져서 새로운 state구나 인식  
//즉, state가 array/object 면 독립적 카피본을 만들어서 수정해야함
          copy[0] = "여름 옷 추천";
          글제목변경(copy);
        }}
      >
        글수정
      </button>

가나다순 정렬 버튼 만들기

let [글제목, 글제목변경] = useState(["겨울 옷 추천","서울 맛집 추천","도서 추천",]);

<button
	onClick={() => {
		let copy=[...글제목]
		copy.sort();
		글제목변경(copy)
	}} >정렬버튼</button>

sort() 메서드의 특징 : 기본적으로 오름차순으로 정렬