UI UX + CSS 는 ai 의 도움을 받았습니다 . 이번 경우에는, 파일 하나에 모든 코드가 들어있지 않고, 나눠서 작업을 했습니다. 1. cartMain.jsx ( Main이 되는 파일 )2. cart.jsx ( 장바구니 역할을 하는 파일 )3. products.jsx ( 상품 목록 파일 ) 일단 prop으로 다 넘겨줘야해서, products 인 경우 useState를 이용해서 cart.jsx & products.jsx로 넘겨주고 onAdd onSub onDel 함수 또한 메인에서 만들고 다 넘겨주고 각각 모듈에서 실행하게 만들어줬습니다. 이번 기회에, { spread, map, filter만 사용하던걸 Array.prototype.find를 이용하게 되었고 상황에 따라 사용하게 되었습니다.
그놈의 Todo List 참.. 예전부터 언어만 배웠다 하면, todo list를 만들었던 것 같다. 사실 useState 를 배우고 나서, 예제로 혼자 만들어본거라 코드가 조금 난잡한게 있긴한데 기본적으로 CRUD 에 대한 부분과React 의 고유의 동적으로 돔이 변하는걸 잘 반영한 친구라고 생각이 듭니다. 만들어 보면서, 예전엔 강의보며 따라치며 위와 비슷한 TodoList를 만들어봤던거 같은데 그땐 따라만 치고 넘어간다고,Array.property.map 이랑 Array.property.filter 에 대해 얕게 알고 넘어간것 같은데 이번 기회에 좀 더 깊게 배울려고 노력했고, 전보단 좀 더 깊이가 있다고 느껴진 경험 이었습니다.
react에서 date를 처리하는 것은 여간 까다로운 작업이 아닐 수 없습니다. format을 다 처리해야 하기 때문이죠. react에서 input을 생성하고 type을 date를 줍니다. date input value의 date format은 YYYY-MM-DD입니다. const [date, setDate] = useState(new Date()); const getStringDate = (date) => { let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (month < 10) { month = `0${month}`; } if (day < 10) { day = `0${day}`; } ..
useMemo 에 이어서 useCallback 에 대해서 알아봅시다. 이번에도 Dingdong Ditch(띵똥 벨튀) component를 뜯어서 개조를 해볼것입니다. 전 포스팅에서도 말했지만 useMemo, useCallback 서로비슷합니다. useMemo 기반에서 추가된게 useCallback 이니까영 Memoization 이란? 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다. useMemo: memoization 된 값을 반환 합니다. useCallback: memoization 된 함수를 반환 합니다. useCallback의 간단한 예시를 들자면 1. useCallback(() => fn, [deps]); // deps의 데이터가 변하..
useMemo useMemo에 대해 공부를 하였지만 어떤 예제를 들어야 할지 애매모호 해서 상당히 골치 아팠습니다. 그러다 어제 올린 React.memo 에서 띵똥 벨튀 예제를 가져와서 쓰면 괜찮을것 같아서 DindongDitch를 개조해 보았습니다. useMemo 를 공부하면 useCallback 은 필연으로 공부를 하게 됩니다. 두가지 비슷하지만 확연히 차이가 있습니다. Memoization 이란? 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다. useMemo: memoization 된 값을 반환 합니다. useCallback: memoization 된 함수를 반환 합니다. useMemo의 간단한 예시를 들자면 1. useMemo(() =..
React 최적화를 하기 위해 useMemo, React.memo, useCallback 세가지를 보통 이용 합니다 (제가 아직 배운게 이것밖에 없어서) 그중에서 React.memo에 대해 공부하며 예제를 간단히 만들어보며 연구를 했는데 괜찮은 예제가 떠올라서 이렇게 공부한걸 올리는 겸 예제를 공유 해봅니다. React.memo를 배우기전에 Memoized에 대해서 알아야하는데 Memoized는 주어진 입력값에 대한 결과를 저장함으로써 같은 입력 값에 대해 함수가 한 번만 실행되는 것을 보장하는것을 의미합니다. ( 알고리즘 방식이기도 합니다. ) React.memo는 Component의 결과값을 Memoized를 합니다 한국에서 어릴때 유행했던 벨튀(DingDong Ditch) 를 바탕으로 Compone..
