react 배울때 props readonly라고 배운다.
그 결과를 바로 확인해볼수있는게 props 값을 변경하려고 하면 readonly이기때문에 재할당하면 안된다고 런타임에러 잘만뜬다.
그래서 우리는 props의 값을 안심하고 지지고 볶고 하는데, 조심해야될게 있다.
일반적인 상황을 설명해보겠다.
props로 arr라는 이름의 array를 자식 컴포넌트에게 주는 상황.
이럴때 props는 당연히 readonly이기때문에
const ChildComponent = () => {
arr=[] // props readonly 에러
return <p>child</p>
}
당연히 에러뜬다. 그런데 javascript에서 배열이라는게 무엇인가, object이다.
변수에다가 object를 저장할때는 주소를 저장받는다. 그렇다면 props.arr에서도 역시 arr 배열의 주소를 갖고있겠다.
요기서 문제가 생긴다. 배열의 주소를 유지하면서 배열의 내부 값들만 변경한다면 props의 readonly는 아무런 문제도 못느낀다.
arr 배열의 내부 값들을 직접 변경하거나 그러한 일들을 수행하는 내장 배열함수를 사용하고 지지고 볶고 해도 readonly는 아무 문제도 못느낀다. 주소는 그대로니깐.
const ChildComponent = () => {
arr=['sfa']; // props readonly 에러
arr[0]='sfa'; // no problem!
arr.splice(1,1); // splice는 배열 내부값을 변경하는 대표적인 배열 내장 함수 그래도 no problem!!
return <p>child</p>
}뭐 명시적으로만 생각해본다면 arr의 주소는 그대로이니깐 props의 불변성은 지켜졌다고 할수는 있다.
근데 불변성의 의미를 좀더 진지하게 생각해보자. 저렇게 props의 멤버 arr의 주소는 유지하더라도 내부값이 변경된다면 이거를 불변성이 유지됐다고 이야기할수있을까?
내가 생각하기에는 이러한 것은 불변성이라 하기 애매하고 이러한 코드들은 디버깅에 엄청난 악영향, 여러 문제를 주는, 코드를 예측할수없게 만들어버리는 최악의 코드다.
이러한 사실을 생각하고 우리가 props의 객체 멤버들을 다루어야할것이다.
내부 상태를 변경하는 배열 내장 함수를 사용할때는 배열 사본을 만든이후 처리를 하는것과 같이 props의 불변성을 유지하기위해서 노력할 필요가 있다.
const ChildComponent = () => {
// arr.splice(1,1); no!!!!!!!
const copiedArr = [...arr];
copedArr.splice(1,1); // 진행시켜!!!!!!!
return <p>child</p>
}요런식으로 말이다. 이 사본만드는 방법말고도 여러 방법이 있을수 있으니 잘 생각해서 사용했으면 좋겠다.
게시글 읽어주셔서 감사합니다. 잘못된 사실, 새로운 의견있으시면 댓글로 달아주세요. 게시글 수정을 통해 반영하겠습니다. :))))))
