이번 편은 자바스크립트 복습에 초점을 맞추고 서술할 것 같다.
개발하다 보면 객체, 배열 같은 원시 타입이 아닌 참조 타입을 작성할때가 있을것이다.
이럴때 기존의 참조타입을 변경시키지 말고 새로운 복사본을 하나를 만들어서 진행을 하자.
기존 데이터를 변경하면 원하지 않는 결과값을 초래하거나 버그등 수많은 문제가 발생하기 때문,
실무에서도 as-is를 to-be로 할때 몇몇 개발자분들은 얕은 복사로 사용하시는것을 봤기때문에 그럴때마다 이런 방법을 추천해주었다.
예시를 보자
/**
* 2차원 배열이 존재한다, 이것을 얕은복사로(참조)만 사용하게 된다면 기존 값을 건들기 때문에
* 리스크가 크다.
*/
const initialArray = [
[null, null, null],
[null, null, null],
[null, null, null]
]
// 방법1
let newArray = [...initialArray]
// 방법2
let newArray = [];
for(let i=0; i<initialArray.length; i++){
newArray[i] = initialArray[i]
for(let j=0; j<initialArray[i].length; j++){
newArray[i][j] = initialArray[i][j]
}
}
/**
* 방법2를 사용하신분들도 꽤 있었지만 그래도 방법1을 추천한다,
* 그이유는 한눈에 보기에도 편하고 코드의 압축을 보여주기때문이다.
*/
/**
* React에서 가장 추천하는 방법은 페이지에 여러개의 State를 만드는게 아니라,
* 필요에 따라 State를 생성하는것을 배도록 하자.
* 이는 코드의 복잡성과 하나만으로도
* 충분히 작업을 할 수 있기때문이다.
* 전체적으로 사용하는것은 상태관리를 사용하면 되는것이고
* 그외에는 변수를 만들어서 자식 컴포넌트에 prop 전달을 하는 쪽으로 가자 (이는 나중에 props drilling으로 생길 수 있다.)
*/
Practice makes perfect