JS기초가 부족하면 React가 망한다는 말 진짜였네

결론: JS 기초 제대로 안 해놓으면 멸망

 

문제의 발단

 

리액트를 배운 첫날, 나는 '수정버튼'을 누르면 글제목 안의 첫번째 인덱스인 '남자 코트 추천'을 '여자 코트 추천' 으로 바뀌도록 만들라는 지령을 받았다.

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button> 수정버튼 </button>
  )
}

 

기존 state의 첫번째 요소만 살짝 변경해주고 state변경함수에 집어넣는 식으로 해보았다.

원본은 건들이면 좋을게 없기 때문에 copy를 하나 만들어서 만들었다.

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = 글제목;
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )
}

 

 

근데 안된다.

 

왜냐면........

 

React는 state변경함수를 쓸 때 기존의 state가 새로 바꾼 state와 같은지 검사를 하고 같으면 변경을 해주지 않는데, 당연히 거기에 들어가는 에너지를 아끼기 위함이다. 여기서 글제목이 변경되지 않아서 그렇다.

 

 

나는 분명히 0번째 요소를 변경하고 state함수를 쓴건데 이 무슨 소리냐고?

 

 

여기서 중요한 자바스크립트의 개념.

 

자바스크립트의 배열&오브젝트 자료형은 reference data type이다. 

reference = '참조'라는 뜻인데,

 

예를들어 let arr = [1,2,3] 이렇게 배열을 하나 만들어 arr에 할당했다고 치자.

arr 안에 배열이 들어갔다고 생각할 수 있지만 사실 배열은 메모리의 어딘가, 다른곳에 따로 저장되어있고 arr 안에는 그 저장되어있는곳의 주소, 즉 참조하는 reference만 들어있다! 

출처: 코딩애플

 

배열이 진짜 어디에 들어있는지 가르키고있는 '화살표'가 들어있다고 표현하기도 한다.

 

그렇기 때문에 위의 코드처럼 '글제목' 변수 안의 자료들을 아무렇게나 막 변경한다고 해도 글제목이 가지고있는 화살표-참조값-주소 자체는 변하지 않기 때문에 React는 기존의 state와 변한것이 없다고 판단하고 아무일도 하지 않는다.

 

 

진짠지 확인

 

test1 에 배열을 하나 만들고,

test2에 test1을 복사해주었다.

이후 test2 안의 값을 바꿨고

콘솔로그로 test1와 test2가 같은지 출력해봤다

같대잖아...!!

 

 

 

어떻게 해결할 수 있나?

 

let copy = [...글제목];

위와 같이 적어주면 괄호를 벗기고 다시 새로운 배열이나 오브젝트로 만들어줄 수 있다.

완전히 새로 생성되었기 때문에 화살표도 새로 만들어진다고 생각하면 된다.

문법은 spread oprater라고 불리고, 배열이나 오브젝트 자료형 왼쪽에 붙여서 사용한다.

 

 

 

 

결론

 

리액트에서 배열이나 오브젝트 state를 수정하고 싶으면 ...문법을 사용해 독립적인 카피본을 만들어서 수정하자!

[...기존state] 

{...기존state}

 

 

---

React를 하다가 마음대로 안될 때는 대부분 JS가 탄탄하지 않아서 그렇다고 한다. 오늘 기초를 하며 맛보기로 느꼈지만 앞으로 React를 공부하면서 JS를 놓지 말고 꾸준히 해야겠다고 생각이 든다. 재밌다~!!!!