개발기록

코드를 리팩토링하며, 많은 코드가 리렌더링이 되는 걸 확인하면서, 최적화를 해야할때가 온 것 같다.이때까지 계산이 복잡한 함수나, 렌더링이 다수 일어나는 컴포넌트에는 메모라이징을 해두었는데 useMemo를 사용하며 디펜던시에 넣어두는 값들이 내가 정확하게 맞게 사용한 것인지, 한번 더 최적화에 대해 복습해야 할 것 같아 다시한번 적어두기로 했다.react에서 메모가 작동하는 방식과 장독하지 않는 방식 메모이제이션이 무엇인지, 그것이 react에서 해결하는 방식이 무엇인지, useMemo, useCallback,react.memo가 작동하는 방식은 무엇인지 왜 필요할까값을 비교하는 것이 전부, 변수는 비교객체, 배열, 함수는 메모리에 위치하여 해당 개체 참조하기때문에 비교시 결과는 거짓이 된다. 이는 얕은..

john an 님 유튜브 Redux 데이터 flow ACTION -> REDUCER -> STORE Action 무엇이 일어났는지를 설명하는 '객체' {type: 'LIKE_ARTICLE', articledId: 42}//like 버튼을 좋아요 했다는 것을 설명하는 것 {type: 'FETCH_USER_SUCCESS', response: {id:3, name: 'Mary'}}//user을 가져오는 것을 성공했다라는 것을 설명하는 것 {type: 'ADD_TODO', text: 'Read the Redux docs.'}//이 텍스트를 todolist에 add했다는 상태를 알려주는 것 Reducer state는 2-3으로 변할 수 있다 action을 통함으로 인해 4로 변했다고 설명하는 것이 reducer ..

funciton tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법은 뭘까? 이 컴포넌트는 스스로 타이머를 설정하며, 매초 스스로 업데이트 할 것이다 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } funciton tick() { ReactDOM.render( ,//-->Clock..