Sonak Blog

vue와 react의 상태관리에 대해서 알아보려고 하는데 참조값이 뭐지 라는 생각이들어서 찾아보게되었다 

js 는 값에의한 전달과 참조에 의한 전달을 사용하는데 

boolean, null , undefined, string , number 등의 원시타입은 값에의한 전달을 하게 된다 

좋은 예시가 있어 참고할 블로그 링크를 하단에 적어두겠다 

이런식으로 변수선언을 하고 

const x = 10

const y = 'abc'

const z = null 

원시타입이 지정되면 메모리에 변수가 

이런식으로 저장된다고 가정하고 

const a = x

const b = y

이렇게  또 변수선언을 한다하면 

메모리엔 이런식으로 값이 저장되게 된다 

원시타입이 아닌 arr object function 은

그 값으로 향하는 참고값을 변수에 지정하게 된다 

즉 이러한 값들은 내가 메모리 값을 보게되면 그 배열이 바로 보이는게 아니라 그 배열로 가는 번호가 저장되어있다고 생각하면 된다 

두번 타고 들어가야한다는 의미 

1) var arr = []

2) arr.push(1);

이런식으로 예시그림이 있는데  변수의 값은 바뀌지않고  arr의 값만 바뀌는것이다 

(변수는 arr로 향하는 이정표이기 때문에 )

설명을 하자면 변수 arr은 값으로 #001 이라는 메모리주소를 가르키고있고 

주소 #001 에는 배열이 담겨있는것 . 

이렇게 변수를 선언한다면 refCopy는 값을 참조가 복사된다 결국 같은 메모리주소를 바라보기는 한다 

var reference = [1];
var refCopy = reference;

이 외에도 순수함수 비순수함수 가비지컬렉션에 대한 이야기들이 있으니 아래 블로그를 한번쯤 쓱 보는것도 좋다 

참고블로그 

https://velog.io/@jakeseo_me/2019-04-01-1904-%EC%9E%91%EC%84%B1%EB%90%A8-2bjty7tuuf

요즘 next 를 공부하다가 vue에선 v-for를 사용했는데 reactd 에선 map을 사용한다는걸 알게 되었고 

forEach와 map 의 차이에 대해서 궁금해졌다 

일단 가장 큰 차이로 두가지가 있다 .

1. return의 유무 

2. 새로운 배열을 생성하는지 

forEach는 return을 가지지 않고 새로운 배열을 생성하지않음 , 순회를 하고 배열 요소를 수정함 , 기존 배열을 직접 조작함 

map은 return을 가지고 새로운 배열을 생성함 , 지정된 콜백 함수를 실행하고 이를 기반으로 새 배열을 생성하고 반환함 

데이터 크기가 커지면 map 은 새로운 배열을 생성해야하기때문에 성능적으로 불리할 수 있고 

forEach는 원본 배열을 수정하기 떄문에 주의해야한다는 생각을 하게되었다 

추가로 react에서의 map 과 vue의 v-for에는 어떠한 작동방식의 차이가 있는지 궁금했는데 

https://github.com/vuejs/core/blob/main/packages/runtime-core/src/helpers/renderList.ts

vue의 v-for는 for문을 사용한다 

여기서 for 와 map 의 차이점에 대해 다시 생각하게 되었다 

단순하게 나는 여기서 어 그러면 v-for는 for문이기때문에 새로운 배열을 생성하지않고 그것때문에 배열안의 객체 데이터가 변경되었을 때 

감지하지 못하는것인가 ??? 라는 생각을 했었는데 

vue는 proxy로 객체의 내부를 감시하기때문에 배열을 생성하지 않는다고 문제가 생기진않는다는 답변을 얻었다 

이부분에 대해서는 좀 더 생각을 해보고 proxy 에 대해서도 조금 더 찾아봐야겠다