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