리액트 기초 복습 - 깊은 복사로 배열 수정하기

배열 내 특정 값만 useState의 변경함수로 바꾸기

const postName = [
    "여자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학"
];
  
const [name, setName] = useState(postName);

 

이런 코드가 있을 때 postName의 0번째 값을 '남자 코트 추천'으로 바꾸고 싶다.

 

변경 가능성이 있는 값이기에 useState를 사용하여 값을 바꾸기 위해 아래와 같이 핸들러함수를 만들어 보았다.

const nameChangeHandler = () => {
    let postNameCopy = postName;
    postNameCopy[0] = "남자 코트 추천";
    setName(postNameCopy);
}

 

원본인 postName 값을 바꾸지 않기 위해 postNameCopy에 postName의 값을 복사했지만, 위와 같이 입력하고 변경 버튼을 누르면 변경되지 않는다.

 

왜냐면 원본배열에 영향을 끼치기 때문이다. 

 

위 코드처럼 작성하면 postNameCopy는 postName 배열의 참조값을 가지게 되는데, 이는 두 변수가 같은 메모리 주소를 공유한다는 것이며, 이를 얕은 복사(shallow copy)라 한다. 이 상태에서 postNameCopy나 postName 배열 중 하나를 수정하면 다른 하나에도 영향을 미치게 된다. 의도하고싶지 않은 결과다.

 

그래서 아래와 같이 수정해야 한다.

const nameChangeHandler = () => {
    let postNameCopy = [...postName];
    postNameCopy[0] = "남자 코트 추천";
    setName(postNameCopy);
}

 

위와 같이 스프레드 연산자를 사용하면 배열의 모든 요소들이 새로운 배열인 postNameCopy로 복사되고, 이를 깊은 복사(deep copy)라고 한다. 이렇게 되면 postNameCopy는 postName과는 별개의 메모리 공간을 받아서 독립적인 배열이 된다. 그러면 마음 놓고 배열 수정을 할 수 있는 것이다.