오늘의 React

1. State

- state는 왜 필요해? 

• 어떤 자료를 잠깐 저장하고 싶을 때 사용한다.

- 사용방법

• useState를 import한다.
• 내가 잠시 맡길 자료를 useState()안에 저장한다.
• 보통 let [자료, 자료 변경 도우미(함수)]의 구조의 형태를 가진다. 

- 일반 변수 vs state

• 일반 변수는 값이 변경되면 html에 자동으로 반영되지 않는다.
• 반면에 state는 갑자기 값이 변경되면 html에 자동으로 반영된다.(재렌더링)
• 결론 자주 아무때나 state 사용하지 말고 어떤 값이 자꾸 변경되는 부분만 사용하자. 

- state 함수 사용법(3가지 중에 하나 선택)

• event handler = { 함수 }
• event handler = { 함수() { console.log(1) }}
• event handler = { () => { console.log(1) }}
• 이벤트 핸들러 = 특정 행동(클릭, 요소 변경되거나, 키보드 눌렀을때)을때 어떠한 것이 변경되기 위해서는 함수랑 연결해준다. 

- state을 변경하는 법 

• 예시) 클릭할 때마다 좋아요를 1씩 증가하고 싶은 경우

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

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);

  let [좋아요, 좋아요변경] = useState(0);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>
      <div className="list">
        <h4> { 메뉴[0] } <span onClick={ () => { 좋아요변경(좋아요+1) } }>👍</span> { 좋아요 } </h4>
        <p>1월 10일</p>
      </div>
      <div className="list">
        <h4> { 메뉴[1] } </h4>
        <p>1월 10일</p>
      </div>
      <div className="list">
        <h4> { 메뉴[2] } </h4>
        <p>1월 10일</p>
      </div>
    </div>
  );
}

export default App;

- state 변경함수의 특징

• 기존 state와 신규 state가 같으면 값을 변경해주지 않는다. 이 말은 내가 어떤 값을 변경했을 때 html상에서 바뀌지 않는다면 이전 state와 차이가 없기 때문이다. 

- Array/Object에서 state를 변경시에 알아두어야 할 특징

• Array/Object를 담은 변수에는 값이 어디에 저장됐는지 알려주는 표시만 저장된다.
• 미지의 공간 RAM(임의접근메모리)에 저장된다. 
• 코드와 함께 설명하겠다.

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

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>
      <button onClick={ () => {
        let copy = 메뉴;
        copy[0] = "볶음밥"
        console.log(copy == 메뉴)
        메뉴변경(copy)} }>
          메뉴수정
      </button>
    </div>
  );
}

export default App;

• 만약 위처럼 let copy = "메뉴" 을 하게 되면 실제로 메뉴 배열을 복사하는 것이 아니라 메뉴 배열을 참조하는 것이기 때문에   console.log(copy === 메뉴)를 하게 되면 같은 배열을 참조하고 있기 때문에 true가 나온다. 따라서 기존 state와 신규 state의 차이가 없음을 인식해서 html에서 아무것도 변하지 않는다. 
• 그래서 찐으로 배열을 복사해야한다.

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

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>
      <button onClick={ () => {
        let copy = [...메뉴];
        copy[0] = "볶음밥"
        console.log(copy == 메뉴)
        메뉴변경(copy)} }>
          메뉴수정
      </button>
    </div>
  );
}

export default App;

• 위의처럼 let copy = [...메뉴] 이렇게 하면 배열의 괄호를 벗겨준 다음에 다시 씌워준다. 완전히 새로운 array가 탄생하고 copy배열을 수정하면 원래의 메뉴배열에 영향을 주지 않고 메뉴변경 함수를 호출해서 state를 업데이트한다.