primitive type(원시 타입), Objects(객체)

리액트 튜토리얼을 하다가 componentDidMount 에서 prevState와 this.state의 값이 같은 문제가 발생했다.

찾아보니 메소드에서 의도치 않게 state의 값을 변경해서 그런 것이었다.

//  문제가 발생한 코드
handleRemove() {
    let contactData = this.state.contactData; // 여기서 문제 발생
    contactData.splice(this.state.selectedKey, 1); // delete element at index of selectedKey 

    this.setState({
      contactData,
      selectedKey: -1,
    });
}

지금까지 let contactData = this.state.contactData 이런 대입을 하면 값이 복사되어 저장되는 줄 알았는데 값이 저장되는게 아니라 같은 메모리를 참조하는 것이었다. 💩

---

primitive type(원시타입)

자바스크립트에서 오브젝트를 제외한 모든 타입은 원시타입이다.

원시타입의 종류는 6가지가 있다.

• Boolean
• Null
• Undefined
• Number
• String
• Symbol

모든 원시타입은 변경 불가능한 값(immutable value)이다. 변수에 다른 원시타입을 할당하는 경우는 기존의 값이 변경되는게 아니라 새로운 값이 생성되어 할당되는 것이다.

objects

원시 타입을 제외한 모든 것. 객체, 함수, 배열 등이 있다

참조 타입(reference type)이라고 하는데 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다. 참조는 참조 타입 데이터의 주소이지 해당 데이터의 값이 아니다.

---

그래서 ...(spread연산자)로 배열을 복사해주니 원하는대로 동작했다 😀

handleRemove() {
        let contactData = [...this.state.contactData];
        contactData.splice(this.state.selectedKey, 1); // delete element at index of selectedKey 

        this.setState({
            contactData,
            selectedKey: -1,
        });
    }