공부8 react 여러개의 상태값 변경 function onClick(){ setCount(count+1); setCount(count+1); }; 동기로 처리한다면, 하나의 상태값 처리할 때마다 화면을 다시그리므로 성능이슈 발생할 수 있음. 만약 상태값 변경은 동기로 처리하고, 화면을 그리지 않는다면 데이터와 화면의 불일치 발생. 해결방법 : 함수로 해결, 처리되기 직전에 상태값을 매개변수로 받기 때문에 처리 가능. function onClick(){ setCount(v=>v+1); setCount(v=>v+1); }; 2021. 11. 15. redux 리엑트에서 어떤 프롭스를 아래, 아래, 아래,아래,아래,아래에 있는 하위 컴포넌트에서 써야할 때가 있는데. 그때마다 최하위 뎁스까지 연속해서 프롭스를 전달해야한다. 이것을 프롭스 드릴링 이라고 한다. 그 숨막히는 프롭스 드릴링 노가다(?)는 같은 작업을 반복한다는 점에서도 문제가 있지만, 유지보수가 깔끔치 못하다는 점이 크다고 볼 수 있다. 이를 해결하기 위해 리덕스를 사용한다. (아, 좀 한번에...) 전역변수 같은 스토어라는 걸 하나 두고 상태를 관리하겠다는 것이다. 그렇다면 필요한게 뭘까? 값 읽기 상태값에 접근하는데 제한을 두어야한다. a=10 같이 휙 바꿔버리면 안되니까. getState같은 것이 필요하겠다. 값 변화시키기 상태값을 변화시키는 장치를 두어야한다. 그래야 상태값을 업데이트 시키니까.. 2021. 11. 12. element 이동 완료 추적하기 실무에서 에니메이트가 끝나는 그 순간에 이어서 무슨 작업을 하고 싶을 때가 있다. a라는 요소가 top:0에서 top:100으로 이동되고난 바로 직후, 하고싶은 거라던지 말이다. 여태까지는 다른 꼼수로 해당 문제를 우회했었는데 다음과 같은 방법으로 직접적으로 해결했다. 먼저 setAnimateAndWatch라는 함수에 매개변수를 3개 셋팅한다. el: 타겟 elementdirection:여기서는 top,bottom,left,rightvalue:100px이라면 100 그리고 내부에서 해당 매개변수를 이용해 로직을 만든 Promise를 리턴한다.코드는 아래와 같다. 목표 위치 도달후, el을 반환해준다. const setAnimateAndWatch = (el, direction, value) => { con.. 2021. 10. 12. 퍼블리셔에서 프론트엔드 개발자 - 공부일지 21.01.15 성장과 발전이라는 것은 익숙한 영역을 넓혀가는 것이라고 생각한다. 여기서 성공과 실패 유무는 중요치 않다. 익숙하지 않은 영역을 향해 앞으로 한 발자국 내딛고 버티는 것이라고 생각한다. 그것이 지혜로운 용기이던, 무모한 용기이던 크게 중요치는 않다. 무모한 용기였다면 또 다른 인사이트가 있으리라. 그렇게 앞으로 내딛은 한 발자국이 나의 익숙한 영역이 되는 것이라고 생각한다. 23살 이후의 나는 항상 그래왔고 앞으로도 그럴 것이다. - 2020년은 매일을 쪽잠?자며 공부와 직장생활을 병행했다. 퍼블리싱 일에 적응할만해지니까 일이 쏟아졌다. 대표님은 내게 일복이 많다고 해주셧다. 감사한 일이다. 많은 프로젝트를 진행했고, 열심히 배웠고, 안되는 것은 매달렸으며, 최선을 다해 일했다. 부족함을 느끼고 아쉬운게.. 2021. 1. 15. 이전 1 2 다음
