[React] CH05. Array, Object state 데이터 수정 방법

1. Array, Object state 데이터 수정 방법

1.1 변경함수 사용 X ⇒ 권장사항 X

# 권장사항 XXXXXX ⇒ state는 직접 건들면 안됨
function 글제목바꾸기(){
    글제목[0] = '여자 추천 코드'
  }
  
  <button onClick={ 글제목바꾸기 }>버튼</button>

 

※ 참고
함수()를 바로 넣으면 → 함수아니라 바로 실행되어 결과가 출력됨
따라서, 클릭 시 함수가 실행되게 하려면, 함수를 직접 넣어야 함.

EX) <button onClick={ 글제목바꾸기 }>버튼</button>

 

1.2 변경함수(대체할 데이터) 사용 O  ⇒ 권장사항 O

• 1) 하드 코딩
  

  # 권장사항 OOOO ⇒ 변경함수 이용
  function 글제목바꾸기(){
      // 하드코딩 변경방법    
      글제목변경( ['여자 코트 추천', '강남 우동 맛집', '치킨 맛집 추천'] );
  }
    
    <button onClick={ 글제목바꾸기 }>버튼</button>​

• 2) deep copy
  • 많은 배열을 하드코딩해서 다 쓸수 없으므로 → deep copy로 복사본 생성하여 수정
  • 값 공유 X, 서로 독립적인 값을 가지는 복사
  • [... 글제목]
    - ... : 중괄호, 대괄호 모두 제거 ( spread 연산자)
    - ...로 중괄호 제거하고, []를 통해 다시 중괄호에 담아 별개의 배열로 만듦
    
    

    # 깊은 복사 : deep copy ⇒ 다른 별개의 복사
    function 글제목바꾸기(){
        var newArray = [...글제목];
        newArray[0] = '여자 코트 추천'
        글제목변경( newArray );
    }

※ shallow copy (얇은 복사)
: 복사가 아니라 값 공유
: 원본 state 건들 수 없으므로 얇은 복사로 하면 변경이 되지 X

# 얇은 복사 : shallow copy ⇒ 복사가 아니라 값 공유
function 글제목바꾸기(){
    var newArray = 글제목;
    newArray[0] = '여자 코트 추천'
    글제목변경( newArray );
}​

 

1.3 정리

1. 기존 state copy본 만들기
2. copy본에 수정사항 반영
3. 변경함수()에 집어넣기

---

[ 참고 ]

 

https://online.codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌