본문 바로가기
  • 삽질하는 자의 블로그
1. Redux 에 관하여 0. 상태(State)에 관하여 1) 로컬 스테이트 : 하나의 컴포넌트 안에 있는 상태 2) 크로스-컴포넌트 스테이트 : 여러개의 컴포넌트에 걸쳐 있는 상태 [props-drilling 을 통해, 여러 컴포넌트에 전달되어있음] 3) App-Wide 스테이트 : 앱의 전반에 걸쳐 있는 상태 (useContext 나 useSession 같은것들) 1. 왜 Context가 있는데도, Redux 를 사용할까? : Context 의 단점을 해결 할 수 있고, 성능을 향싱시킨다. 1) Context를 사용했을 때의 복잡함 : 매우 많은 Context가, 매우 많은 ContextProvider 가, 전반적인 App을 덮을 것이다. 2) 성능 : 개발자피셜, Theme 처럼 한번만 바뀌는, Context는 괜찮지만, .. 2022. 12. 17.
10. 현실적인 커스텀 훅 만들기, WITH. validation, onBlur 이벤트리스너 골머리가 아프다 함수, 상태 를 반환하는 커스텀 훅 을 이용하여 Validation 이 있는 수백개의 INPUT 이 있는 컴포넌트를 리팩토링 해본다. 해봤는데 더 복잡하다. 이렇게 사용할 것은 아니지만... 연습으로 한번 보도록 하자. 1. 간단한 Input 컴포넌트 : input이 있고, validation 을 거쳐, 나온 State 로 error가 나오면 error를 표시하는 컴포넌트 import styles from "./basic-form.module.css"; import AlertFun from "./alert"; import { useEffect, useState } from "react"; function BasicForm() { const [inputText, setInputText] =.. 2022. 12. 14.
9. 훅의 사용 유의사항과 커스텀 훅에 대하여 중복되는 함수 및 중복되는 코드가 있을때, helper(나는 이렇게 지었다) 폴더 안에 넣어둔 파일안에 넣고, "아웃소싱" 을 하는 [ 코드 리팩토링 ] 을 하여, 깔끔한 상태를 유지하려 한다. 리팩토링을 하고 싶은데, 그 안에 Hook 이 들어있다면? "Hook 이 포함된 상태의 함수"를 리팩토링해야한다. 이때, Hook 을 포함하는 리팩토링 코드를, "커스텀 훅" 이라고 한다. 1. 훅을 아웃소싱? 훅의 사용 유의사항을 보자 1. HOOK 은 반드시 "리액트 컴포넌트 함수"안에서 사용해야한다. 리액트 컴포넌트 밖에 정의한 "리듀서 함수", "next의 SSR", "API" 등.. 다른곳은 안된다. 2. HOOK 은 반드시, "컴포넌트 함수의 최상위에 사용해야한다" 콜백 함수, 중첩 함수 같은, 하위 .. 2022. 12. 14.
8. State의 작동 방식 1. useState 는 언제 상태를 업데이트 하는가? function Demo(){ const [x, setX] = useState(false) function change(){ setX(true) console.log(x)// false } } useState 는, "State 의 변화를 스케쥴링" 한다. 여러개의 상태변화라면, "A 를 B 로 바꾸려는 스케쥴", "B 를 C 로 바꾸려는 스케쥴"을 "지정하고, 수행한다." 그리고 컴포넌트가 전부 "재평가" 가 될때, 그 이후 State는 업데이트가 된다. 가장 흔한 실수로 const [enteredName, setEnteredName] = useState("before N") function submitHandler(){ setEnteredName(.. 2022. 12. 14.
7. 리액트의 최적화 With React.memo(), useCallback(), useMemo() 서론. 리액트가 작동하는 방식 리액트는 오로지 "컴포넌트" 에만 초점이 맞추어져 있다. 1) 컴포넌트 끼리 props 를 넘긴다던가 [ props 전달 ] 2) 컴포넌트의 State 를 변화시킨다던가 [ internal-component State ] 3) 컴포넌트를 Context 를 사용해 State 를 변화시킨다던가 [ wide-data State] 이런 것들이 변화되면, 리액트는 [ 컴포넌트를 재평가, 재실행 ] 하게된다. 또한 그 과정에, 화면에 표시해야 할 것들이 있다면, 리액트는 React-DOM 에 그것을 알린다. 리액트DOM 리액트 DOM은 Real DOM 과는 달리 가상 DOM 이다. 리액트로부터 받은 "스냅샷"을 현재의 "스냅샷" 과 비교해, [ 다른 요소들만을 비교해 추가, 삭제, 변.. 2022. 12. 14.
2. 버튼 누를때마다 animation 동작하게 만들기, with React, useEffect animation 은 상태가 평가될때, 한번 실행된다. 버튼을 누를때마다, 실행되게 만들자. 재평가를 시키려면, useState 가 필요할 것이고, 트리거를 만드려면, useEffect 가 필요할것이다. function LayoutHeader() { const [showModal, setShowModal] = useState(false); const cartCtx = useContext(CartContext); ... let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;// setBump 해야, bump 스타일 활성화 useEffect(() => { setBtnBump(() => true);// 버튼의 bump 스타일이, 생기는 트리거 setTi.. 2022. 12. 12.
1. CSS animation 사용하기 with React https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org 이걸 보고 자꾸 실패했다. 왜? className 으로 지정하지 않았기 때문이었다!! React 에서, css animation 을 지정하려거든, className 으로 css animation 을 딱! 집어야한다. 애매하게, p 이렇게 하.. 2022. 12. 12.
6. className, style 다루기 리액트에서는 class 대신 className 을 사용한다. 또한 하나씩 지정할때에는, module.css 를 사용한다. .css 는 "전체 적용"을 불러오기에, .module.css 를 적극 활용하는 중이다. 사용하는 방법 몇가지를 알아보자. 1. className 의 지정 import styles from "./...module.css" 2. 동적 className 의 지정 1. 동적 className 을 지정할때, "" 없이, 지정해야 한다는 점을 명심 import styles from "./...module.css" const condition = true; let dynamaicStyle; if (conditions) { dynamaicStyle = styles.red;// "" 없음을 명심 }.. 2022. 12. 12.
3. Array.splice() - 배열 수정하기 초간단정리 파라미터 1. 원하는 index 선택 2. 해당 index 으로부터 몇개의 Element를 삭제할지 선택 3. 해당 index 에, 추가할 Element * Array.splice(IndexNumber, howManydelete, insertElement) const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); console.log(months); // ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); console.log(months); // ["Jan", "Feb", "March", "April", "May"] 2022. 12. 12.
4. Context 에서 "카트"의 "삭제" 로직을 추가해보자 with Array.splice() 사용 useReducer javascript Array.findIndex() Array.splice() Array.filter() "제거" 방법에, splice() 를 사용했지만, "제거"를 위해,전체 배열을 바꿔서 업데이트해도 된다. Array.filter() 를 사용하여, 해당 id 와 "같지 않은" Element 들만 남겨서 삭제하는 방법도 있다. Add 로직은 추가했다. reducer function 의 "REMOVE_ITEM" 타입에, 제거 함수를 추가해보자. 제거로직 with "Array.splice()" 0. context에서 action 의 페이로드 로, id 를 받아, 해당 INDEX 를 찾는다. 1. 카트에서 - 를 누르면, 해당 id에 대한 amount 에 -1 을 시킨다. 2. 카트.. 2022. 12. 12.
3. 카트 내에서 context를 조작해보자. WITH function.bind() 사용 : function.bind() 카트 안에도 추가 삭제 버튼이 있다. + 와 - 버튼을 누르면, context를 조작하여, 변경된 값을 받아보도록 하자. 우선 Array.map() 을 상요한 무한히 증식하는 버튼의 함수를 하나씩 타겟할때, 바닐라 자바스크립트의 경우는, DOM 에 접근해, querySelectorAll() 을 사용할 것이다. 하지만 React에서는, "선언형 뷰" 를 사용하고, Virtual DOM 에 접근 하는 것이 유리하기 때문에, 그렇게 하지 않는다. 대신 function.bind() 를 사용할 것이다. 모르겠다면, https://dive-into-frontend.tistory.com/69 참조하도록 하자 프로세스 1. 전체 ItemInfo 을 useContext 를 통해 가져.. 2022. 12. 12.
2. Context, useReducer 를 사용하여, 카트에 물건을 담아보자. 사용 Hook useContext, createContext, useReducer , useState javascript 메서드 findIndex, concat reduce function.bind() 본문 카트는, "카트 내부" 뿐 아니라, "메인에 있는 음식 선택창", "음식 선택창의 +, - 버튼" 등 "어디에서나 접근 가능해야한다." 나는 아직 Redux 를 잘 모른다. (현재 진행중이다) 그래서 상태관리가 미흡하다. 그러므로 Context 를 사용하여, 카트에 모든 값들을 접근시켜보자. 총 프로세스 1. context 를 만든다. 2. context 안에는 useReducer 를 만들어, 추가하고 삭제하는 로직을 만든다. 3. cart 안에서 필요한 상태는, "총가격", "카트 안에 담긴 정보".. 2022. 12. 12.

티스토리툴바