어떤 강의를 듣다가 숙제로 배열의 한 값을 바꾸는 숙제를 받았다.
처음엔 코드를
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의 작동 원리도 알게 되었고 새로운 문법도 알게 되어 기분이 좋다