0821
map, reduce, filter
- map
js
function map(arr, callback){
const res = [];
for (let i = 0; i < arr.length; i++){
res.push(callback(arr[i], i, arr));
}
return res;
}
console.log(map([1,2,3], (x=>x*2))); // [2, 4, 6]- reduce
js
function reduce(arr, callback, initialValue) {
let accumulator = initialValue;
let startIdx = 0;
if (accumulator === undefined) {
accumulator = arr[0];
startIdx = 1;
}
else {
for (let i = startIdx; i < arr.length; i++) {
accumulator = callback(accumulator, arr[i], i, arr);
}
}
return accumulator;
}
console.log(reduce([1, 2, 3, 4], (acc, val) => acc + val, 0)); // 10- filter
js
function filter(arr, callback){
const res = [];
for (let i = 0; i < arr.length; i++){
if(callback(arr[i], i, arr)){
res.push(arr[i]);
}
}
return res;
}
console.log(filter([1,2,3,4], (x=>x%2===0))); // [2, 4]클로저와 useState
- new value로 바뀌지 않을 때 어떻게 해야하는지
_val을 직접 꺼내쓰지 않고, getter 함수를 만들어_val을 return 하는 함수를 추가한다.- 또는 getter 함수를 만들지 않고 setter에서 바로 현재
_val값을 반환해도 된다.
js
function useState(initialValue) {
let _val = initialValue;
function _getVal() {
return _val;
}
function _setVal(newValue) {
_val = newValue;
}
return [_getVal, _setVal];
}
const [value, setValue] = useState('initial value');
console.log(value()); // initial value
setValue('new value');
console.log(value()); // new value- 왜 저렇게 바꾸면 값이 바껴보이는건지?
value()함수가 클로저 속_val을 참조하고 있기 때문에.
- react의 useState
- 리액트는 값을 직접 바꾸지 않고 업데이트를 예약한다.
- 예약을 처리하면서 컴포넌트 함수를 다시 실행(리렌더링)하고
- 이 때 새 상태의 값의 스냅샷이 컴포넌트 내부 변수로 바인딩된다.
- 그 후 다음 렌더링이 일어나야지만 값이 새로운 값으로 변경된다.
- https://velog.io/@iberis/기술면접-클로저를-활용해-useState-만들기
Thinking in React
- 상위 계층 ui부터 생각하기
- state가 어디에 있어야 할 지 정하기
- 일단 데이터가 사용되는 컴포넌트라면 개별적으로 state를 주고, 공통되는 부분이 있다면 부모 컴포넌트에 state를 주고 자식 컴포넌트에서 props로 해당 state를 받는 형태로 작성.
- 그렇다고 해서 하나의 컴포넌트에 너무 많은 책임을 주진 말기. 만약 너무 많은 책임이 있다면 커스텀 훅으로 분리하기.
- 역방향으로 데이터 흐름 추가하기.
- 자식 컴포넌트에다 onChange를 핸들러를 추가해서 부모 state를 변경할 수 있도록 만들기.
마음가짐
- 데이터 자료형 확인, package.json 확인. 어떤 패키지 깔려있는지 보고 추가해야될 거 있음 install 하기.
- 데이터를 어떻게 저장할지. state? session storage? local storage?
- 데이터를 어떻게 갖고올지. 일반 fetch(json형태로 변환을 해줘야됨)?, axios(json 형태로 변환 필요X)?, tanstack query(실시간으로 캐싱 처리)?
- form이라면 그냥 useState를 활용해서 검증 할 지, 아니면 컴포넌트와 폼 상태를 분리하기 위해 react hook form을 사용할지. 등...
- 오버 엔지니어링은 아닐지 염두하면서 보기
- test 코드가 있다면 test 코드에 명시되어 있는 id와 class명을 보기.
- 로딩 상태는 분기를 줄이기 위해 suspense로 처리하기
- 포맷 유틸 같은건 유지보수를 위해 상위에 따로 분리하기.
- 불필요한 복잡성과 type 선언은 없는지 확인하기. (특히 react hook form 사용시 control이 특정 form에만 사용되는데 굳이 props로 넘겨주고 있다면 고치기)
- 일단 기능 개발에 우선을 두고, 그 후에 리팩토링 하는 형태로 진행하기.
- 요구사항 개발 -> 리팩토링 -> 추가 ux 개선 -> 성능 개선(가능하면)
- 걍 요구사항 꼼꼼히 보고 작동 되게하기 .....