[문법] state 사용, 스프레드 연산자

1. 함수로 만들어서 onClick 안에 넣기

-> 눌러봐를 누르면 {좋아요}의 값이 + 1 씩 증가하고, 초기화를 누르면 {좋아요} 값이 0이 된다.

import { useState } from 'react'

function App() {
  let post = '강남'; //변수
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']); //state // 구이름-> state의 값, b-> state를 변경하는 함수
  // 변수와 state의 차이 -> 변수는 자동적으로 값이 변경되지 않음(내가 바꿔줘야 함), state는 값이 변경되면 자동으로 재렌더링 됨

  let [좋아요, 좋아요변경] = useState(0);
  function like(){
    좋아요변경(좋아요 + 1);
  }

  function initialization(){
    좋아요변경(0);
  }

  return (
    <>
      <div className="test">
        <span>{ 구이름[1] }
          <span onClick={() => like()}>눌러봐</span> {좋아요}
          <span onClick={() => initialization()}>초기화</span>
        </span>
      </div>
    </>
  )
}

 

 

2. onClick 안에 바로 넣기

import { useState } from 'react'

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']); 
  let [좋아요, 좋아요변경] = useState(0);

  return (
    <>
      <div className="test">
        <span>{ 구이름[1] }
          <span onClick={() => {
          	좋아요변경(좋아요 + 1);
          }}>눌러봐</span> {좋아요}
          <span onClick={() =>{
          	좋아요변경(0);
          }}>초기화</span>
        </span>
      </div>
    </>
  )
}

 

 

3. 스프레드 연산자(여러개 제어 가능) -> ...

스프레드 연산자를 사용하지 않고 가져오게 되면 값을 변경할 수 없다.

변수에 담아도 기존 데이터를 고대로 가져오기 때문에 console.log로 같은지 찍어보면 true가 나올 수 밖에 없다.

 

따라서, array나 object 데이터의 값을 변경하려고 할 땐 스프레드 연산자로 새롭게 독립적으로 복사해와야 한다.

import { useState } from 'react'

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [state, setState] = useState({ 좋아요: 0, 좋아요2: 0 });

  return (
    <>
      <div className="test">
        <span>{ 구이름[0] }
          <span onClick={() =>
            setState({...state, 좋아요: state.좋아요 + 1})
            // ...state(스프레드 연산자)는 state의 값을 그대로 복사 (업데이트에서 불변성을 유지하며 특정 속성 값만 변경)
          }>눌러봐</span> {state.좋아요} <span onClick={() =>
          setState({...state, 좋아요:0})
          }>초기화</span></span>


        <span>{ 구이름[1] }
          <span onClick={() =>
            setState({...state, 좋아요2: state.좋아요2 + 1})
          }>눌러봐</span> {state.좋아요2}
          <span onClick={() => {
            setState({...state, 좋아요2: 0})
          }}>초기화</span>
        </span>
      </div>
    </>
  )
}

 

 

4. 스프레드 연산자2 -> [...] 

스프레드 연산자는 얕은 복사(Shallow Copy)로 객체나 배열의 최상위 수준 요소만 복사

-> 내부 중첩 구조까지 복사되지 않는다.

따라서 원본에 영향을 줄 수 있다.

 

스프레드 연산자를 사용하는 이유는 원본은 그대로 보존하기 위해서 인데 이런 문제점이 있다면 적절하게 잘 사용해야 할 것 같다.

//얕은 복사 사용 예시
function App() {
 let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
 return (
    <>
        <div className="test">
            <span>{ 구이름[0] }
              <span onClick={() => {
                let newName = [...구이름];
                newName[0] = '강동구';
                구이름변경(newName);
              }}>변경</span>
            </span>
        </div>
	</>
  )
}

//중첩은 복사 되지 않는 부분 예시
let original = [1, 2, { a: 3 }];
let shallowCopy = [...original];

shallowCopy[0] = 100; // 복사본의 첫 번째 요소 변경
console.log(original); // [1, 2, { a: 3 }] -> 원본에는 영향 없음

shallowCopy[2].a = 200; // 복사본의 중첩 객체 수정
console.log(original); // [1, 2, { a: 200 }] -> 원본에도 영향을 줌

 

 

[문법] 얕은 복사와 깊은 복사가 뭐지??