useState 배열 바꾸기

배경민·2022년 11월 6일
0

어떤 강의를 듣다가 숙제로 배열의 한 값을 바꾸는 숙제를 받았다.


처음엔 코드를

const [title, setTitle] = useState([
    "사과",
    "포도",
    "망고",
  ]);
  
 ...
 
 onClick={() => {
          setTitle((title[0] = ["애플"]));
  }}

이런식으로 짰다. (당연히 안됨)


당연히 title의 0번째를 바꾸고 그 값을 넣으면 된다 생각을 하였으나 정보를 좀 찾아보니 useState는
값을 바꾸기전 한번 비교를 해보고 그 값이 같으면 안 바꾼다고 하였다.



그럼 이렇게 생각 할 수도 있다.
"아니 title의 0번째 값이 바꼈는데 왜 안 바뀌는 거지? 값이 같아야지 안바꾼다 하지 않았나??"라고
생각할 수도 있지만 사실은 값이 같아야 안바꾼다는게 아닌 주소값이 같아야 안바꾼다는 것이다.
간단하게 사진을 보면 이해할 수 있다.

이 사진에 보이는 것처럼 title은 현재 useState의 값을 가르키고 있고 newArray란 값은
다른 배열을 가르키고 있는 것을 알 수 있다.

따라서 setTitle엔 다른 값을 넣은 title이 와도 useState가 같은 주소값을 가지고 있는 title이 같다 생각하여
알아서 안 바꾼다는 것이다.





그럼 이 코드를 보자

const [title, setTitle] = useState([
    "사과",
    "포도",
    "망고",
  ]);
  
 ...
 
 onClick={() => {
 		  let newArray = title;
          newArray[0] = "애플"
          setTitle(newArray);
  }}

저 위의 사진을 보고 "아 그럼 다른 변수에 title값을 넣으면 되는구나~"라고 생각 할 수도 있다.


하지만 저 newArray는 다른 배열을 만들어 가르키는게 아닌 title의 값이 있는 주소에
화살표를 연결 시킨 것 뿐이다.

따라서 저 위에 있는 코드도 작동이 안된다 라는걸 알 수 있다.




그럼 어떻게 해야되지..? 라고 생각하던 찰나에 총 두분의 선배님께 물어보니
두분 다 "...title을 쓰면 될거예요~"라며 답이 왔다.
처음엔 뭔 소리지 하고 구글링을 해보았다.

... 문법이란 '전개연산자(spread operator)'라고 하며 정말 간단히 말해
새로운 배열, 객체를 생성하여 넣어주는 문법이다.




쓰는 방법은 정말 간단한데

const [title, setTitle] = useState([
    "사과",
    "포도",
    "망고",
  ]);
  
 ...
 
 onClick={() => {
 		  let newArray = [...title];
          newArray[0] = "애플"
          setTitle(newArray);
  }}

이렇게 하면 된다.



"그래서 어떤 원리임???" 이라 생각 할 수 있는데 쉽게 말해
arr1 =[1,2,3]이란 값을 가진 배열이 하나 있고 이 배열을 새 주소에 넣어 arr2에 저장 하고 싶다 하면
arr2 = [...arr1] 이렇게 하면 된다는 것이다.

(위의 사진으로 간단하게 ...문법을 쓰면 어떻게 되는지 나타내보았다.)




(...을 사용하지 않고 arr2 = arr1이라 했을때의 사진)




이렇게 [...변수명]을 써서 쉽게 useState배열의 값을 바꾸는 숙제를 할 수 있었다.
...을 알기 위해 useState의 작동 원리도 알게 되었고 새로운 문법도 알게 되어 기분이 좋다

profile
성장과 경험하는걸 좋아하는 프론트 개발자

0개의 댓글