[220608 / Day 25] React : copy, JSON, map

1. copy

1) deep copy

- 실제 값을 새로운 메모리 공간에 복사하는 것을 의미

- 원시타입 :

let a = 10;

let b = a;

a = 30;

console.log(a) // 30

console.log(b) // 10

 

2) shadow copy

- 주소 값을 복사한다는 의미

- 객체 object :

let a = { value: 1 }

let newA = a;

newA.value = 2;

console.log(a === newA) // true

→ a 와 newA 는 같은 주소를 카피함 그래서 value: 2 라고 주소 안의 값이 바뀐 것이기 때문에 원시타입처럼 각각 a = value: 1 이고 newA = value: 2 로 복사되어 다르게 바뀌는 것이 아니라 같은 주소 안의 값을 바꿔준 것이라 a, newA 값은 같음

 

3) 객체를 deep copy 하는 방법

- Object.assign() : 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣고 대상 객체를 반환, 1단계까지만 카피됨 / 객체를 합치는 것이 가능, 합칠 때는 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용

 

const obj = { num: 1 }

const newObj = Object.assign({}, obj) // 반쪽짜리 디카피 완벽한 디카피는 아님

 

console.log(obj) // 1

console.log(newObj) // 1 카피

 

newObj.num = 10;

console.log(newObj) // 10 으로 변경

console.log(obj === newObj) // false -> obj=1 newObj=10 논카피

→ 복사는 됐지만 변경하면 반영 안됨, newObj 은 obj 과 합친 첫번째 인수값을 반환, 따라서 obj 은 변화 없음, 그리고 deep copy 는 새롭게 하나 복사 붙여넣기로 생기는 거라 주소가 달라져서 어떻게든 false 가 뜸

 

const user = {

    name: '철수',

    hobby: {

        a: 'game',

        b: 'music',

    },

}

const newUser = Object.assign({}, user);

newUser.hobby.a = 'book'; // user, newuser 같이 바뀜

newUser.name = '영희'; // 1단계 카피만 되어 newuser 만 바뀜

console.log(user)

console.log(newUser)

console.log(user == newUser) // 영희까지, false

→ deep copy 는 실제 값을 새로운 메모리 공간에 복사해서 1단계에선 각자 바뀌지만 이중, 삼중 구조로 가게 되면 쉐도우 카피가 되어 같이 바뀜

 

- … 스프레드 연산자 : 복사하고 싶은 객체 이름 앞에 … 만 적어주면 복사

const item = {

    type: 101,

    color: {

        a: 'red',

        b: 'blue',

    },

};

const newItem = { ...item };

console.log(item) // type: 101~

console.log(newItem) // type: 101~

// 똑같이 나옴

 

newItem.type = 202;

console.log(item) // type: 101~

console.log(newItem) // type: 202~

// item.type 은 바뀌지 않음

 

newItem.color.a = 'green';

console.log(item) // green

console.log(newItem) // green

// 두개 다 바뀜

→ deep copy 는 실제 값을 새로운 메모리 공간에 복사해서 1단계에선 각자 바뀌지만 이중, 삼중 구조로 가게 되면 쉐도우 카피가 되어 같이 바뀜

 

 

2. JSON

- 백엔드에서 데이터를 보내줄 때의 자료형태, 객체와 똑같은 모형, 키값을 만들어주고 프로퍼티 입력

- stringify 메서드와 parse 메서드를 이용하면 완벽한 카피가 됨

- 처음부터 parse 쓰면 되지 않나? parse 는 문자열을 오브젝트로 바꿔주는 거라 꼭 stringify, parse 해줘야 완벽하게 카피됨

- 방대한 자료는 유용하지 않음 렌더링 오래걸리기 때문에, 단 이런 경우 많다 하면 어쩔 수 없이 사용, 아주 많이 씀 기억해둘것

- 단점은 함수, 메서드는 카피 안됨 언디파인드 나옴. 따라서 자료형은 쓸 수 있지만 함수, 메서드 들어가면 문제가 생김

 

1) JSON.stringify()

- JavaScript 값이나 객체를 JSON 문자열로 변환. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함

- 예시 : JSON.stringify( value [, replacer [, space ] ] )

const obj = {

    name: '철수',

    address: '서울',

    hobby: {

        a: 'game',

        b: 'music',

    }

}

 

// stringify

const newObj = JSON.stringify(obj);

console.log(newObj)

 // -> {"name":"철수","address":"서울","hobby":{"a":"game","b":"music"}}

 

2) JSON.parse()

- JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형 가능

- 예시 : JSON.parse( text [, reviver ] )

// parse

const newObj2 = JSON.parse(JSON.stringify(obj));

console.log(newObj2) // 문자열 -> 오브젝트

 

 

3. map 반복문

- foreach 의 경우 각각의 element 에 펑션을 ele 하나하나에 실행해주는데 결과값을 리턴하지 않지만 map 은 결과값을 리턴해줌

- foreach 와 map 의 사용법은 동일 :

[ ].forEach((ele,index,arr)=>{})

[ ].map((ele,index,arr)=>{})

 

const arr = [

    { id: 1, item: 'type1' },

    { id: 2, item: 'type2' },

    { id: 3, item: 'type3' },

    { id: 4, item: 'type4' },

    { id: 5, item: 'type5' },

]

 

arr.forEach((ele) => {

    console.log(ele)

});

 

arr.map((ele) => {

    console.log(ele)

});

 

- for문, 반복문을 대체하여 사용한다면 아주 유용하다

- react 에서 반복되는 컴포넌트를 렌더링하기 위하여 자바스크립트 배열의 내장 함수인 map( ) 을 사용

 

1) react 에 적용한 foreach

const arr = [1, 2, 3];

let lis1 = arr.forEach((ele,key) => <li>{ele}</li>);

- foreach : 3번의 함수가 적용. <li> [1] , <li> [2], <li> [3]. → lis1 변수에 저장. 하지만 리턴 값이 없어 출력x

 

2) react 에 적용한 map

const arr = [1, 2, 3];

let lis1 = arr.map((ele, key) => <li key={key}>{ele}</li>);

- map : 리턴값은 함수 안의 값이 모두 리턴, 출력

- 위에서 key 는 어떤 항목을 추가변경할 때 식별자로 사용하기 위해서 key 값을 적용

 

3) map 문에서 key?

- map 메서드를 사용하면 꼭 들어가야 함

- 똑 같은 요소가 반복해서 생겼을 때 그 중 어떤 요소의 변화가 일어나면 그 요소를 식별해야 함

- react 는 가상 돔을 이용해 달라진 속성을 비교해서 업데이트하기 때문에 각각 컴포넌트는 똑같을 수 있지만 식별자는 달라야 함. 즉, key 값을 안 넣어주면 에러나고 동작 하지 않음

- 어떤 항목을 추가 변경할 때 식별자로 사용하기 위해서 key 값을 적용해야 함

- key 값은 고유한 값이어야 함, index 값을 key 값으로 쓰면 안됨

- index 와 id 는 틀림. index 는 번호, id 는 고유한 key 값.

- 받아온 값들 중에서 key 값으로 써야 하는데 index 의 경우 어떤 요소가 추가 됐을 때 index 번호는 수정될 수 있음.

- 따라서 요소가 추가되면 번호가 바뀔 수 있기 때문에 잘못된 곳에 적용될 수 있음 하지만 id 는 변경되지 않기 때문에 key 값으로 많이 사용

 

4. react 에 public 폴더?

이미지 파일 src 에 넣어도 되지만 원본 이미지 파일에 어떤 손상도 입히고 싶지 않다 하면 퍼블릭 폴더.

하지만 퍼블릭에 넣으면 나중에 빌딩할 때 빌딩 파일에 복사되어 문제가 생길 수도 있음

따라서 특별하게 중요한 파일이면 퍼블릭 별 중요한 파일이 아니면 src