What I Learned Week

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);
  }

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

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() 메서드의 특징 : 기본적으로 오름차순으로 정렬

---

리렌더링 발생 조건

1. Props 가 바뀌었을때…

Props 업데이트가 일어나면 리렌더링을 하며, Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.
부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

2.State 바뀌었을때

State 업데이트가 일어나면 리렌더링을 한다.리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.

3.부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.(Props와 같은 원리)

4.강제 업데이트(forceUpdate)가 실행될 때

props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드 이다.