WIL
230613 이른 기상
삐옹
2023. 6. 13. 12:10
어제 잔 낮잠 때문인지 오늘은 일찍 눈을 떴다.
역시 난 아침형인간인걸까?
오늘 뭐할거냐면.
- 코테 day6
- 프젝 진행
- setting, home 페이지 mvp 완성 하여 커밋
배운 것
Javascript
- 얕은 복사: 기존 값과 복사한 값이 같은 주솟값을 참조한다. 그래서 복사한 값을 변경하면 기존 값에도 변경이 일어난다. 단 원시형은 항상 깊은 복사가 일어난다(slice로 실습해보면 1차원 배열or객체에 변경을 하면 기존값에 변경이 일어나지 않아 slice가 깊은 복사를 하는건가 싶을 수 있지만, 앞의 이유 때문에 그런 것이고 그 외 경우엔 모두 얕은 복사를 일으킨다.)
ex) slice, Object,assign(), spread operator - 깊은 복사: 복사한 객체는 객체 안의 객체까지 원본 객체와의 참조가 완전히 끊어진다. 그래서 복사한 값을 변경해도 기존 값은 기존상태를 그대로 유지한다
ex) JSON.stringfy()로 참조를 끊고 JSON.parse를 이용해 다시 객체로 만들어준다. => 단점: 느리고 객체가 함수이면 undefined가 뜬다. / 재귀함수 / lodash - 자료형 2가지 -> 1. 원시형: 메모리 공간에 값이 저장된다. 2. 객체형: 메모리 공간에 주솟값이 저정된다.
Project
- 동적 키 할당
export default function DropDown({ configName }) {
const [ config, setConfig ] = useRecoilState(timerConfigName);
// config = [
// { time: 15 },
// { shortBreak: 5 },
// { longBreak: 5 },
// ];
function getTime(min) {
const newArr = config.map(el => {
console.log('configName' , configName); // (1)
return el[configName] ? { configName : min} : el // (2)
})
};
return (...)
}
(1)에서 DropDown 컴포넌트에 전달된 props가 잘 찍히는데 (2)에서는 "configName" 문자열 그대로 출력된다.
나는 configName 변수값이 필요한데 말이지.
아래는 newArr를 콘솔에 찍은 것이다.
아는 고수형님에게 물어보니 이럴 땐 키값을 동적으로 할당 해주어야 키값에 변수를 넣어주어야 한다고 했다.
return el[configName] ? { [configName] : min} : el // configName을 대괄호로 감싸주었다.
감사감사~