프로그래밍/React
-
[React] ReactQuery에 대해서 좀 더 알아보자프로그래밍/React 2023. 7. 12. 11:07
사용이유 ReactQuery를 왜 써야하는가를 알고 사용을 하자! 1. Store를 좀 더 효율적으로 관리를 해보자 redux를 이용해서 비동기 통신의 데이터를 처리하다보니 store의 크기가 점점 커지게 됨에 따라서 원래 기능인 전역관리와 비동기통신을 구분해줘야겠다는 생각으로 사용하면 된다. 2. boiler plate의 감소 기존의 비동기 통신에서 try catch문을 통해서 ErrorHandling을 했더라면 ReactQuery를 사용하면 좀 더 쉽고 boiler plate를 감소하면서 비동기통신데이터에 대한 관리를 전담해서 할 수 있다. https://abangpa1ace.tistory.com/entry/%EC%9E%91%EC%84%B1%EC%A4%91React-Query-2-Queries%EC%..
-
[React] Portal 사용해서 Modal 만들어보기프로그래밍/React 2023. 7. 11. 16:24
원리 Portal의 사용 원리에 대해서 간단하게 설명하자면 1. index.html에 나타나는 우리 root 와 동일선상에 portal에서 사용할 공간을 생성해 준다 2. portal component를 생성해서 로직을 작성한다. getElementById를 통헤서 root옆에 만들어 주었던 공간을 가져오고 createPoral을 이용해서 연결을 해준다 createPortal( 끄기 , document.getElementById("modal") ) 3. creatPortal의 인자값으로 첫번째는 불러올 Modal을 넣고 두번째는 이동할 위치인 element를 넣는다 주의사항 포탈을 이용해서 root 옆으로 불러오긴했지만 z-index값을 적용한 DOM요소(?)보다 상위에 위치하지 않기때문에 z-index..
-
[React] useCallback VS React.Memo VS useEffect프로그래밍/React 2023. 7. 3. 17:02
지극히 개인적인 사견임을 밝힙니다. 아닌부분은 공부할수록 바뀔 수 있습니다. 먼저 이 Hooks가 사용되는 경우는 최적화라고 보고 있다. React.Momo의 경우 component가 export 될때 또는 함수 자체에 덮어씌듯이 씌어놓으면 부모컴포넌트의 리랜더링에도 부모가 내려주는 props가 변하지 않는다면 랜더링되지 않아서 내가(자식컴포넌트) 가진 함수 및 기타 data들이 리랜더링되지 않아 메모이제이션 과정에서 차지하는 메모리를 제외하고는 cost가 없다는게 가장 큰 장점이다. useCallback의 경우 첫번째 인자로는 callback 함수 두번째 인자는 배열로 deps라고도 불리고 deps의 변경에만 반응하여 함수를 다시 생성을 한다(리랜더링시에) 그렇기에 deps의 변화가 없다면 내가 리랜더..
-
[리액트 알쓸신잡] Hook - 1 - useMemo VS useCallback프로그래밍/React 2023. 6. 22. 14:50
useMemo(() => console.log(), [test]) const memoizedCallback = useCallback(() => console.log(), [test]) 두 로직은 각각 useMemo와 useCallback을 사용해서 같은 결과를 나타내는 로직이다. useMemo 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다 메모이제이션 된 값을 반환하는 함수이다. useMemo(() => fn, [deps]) 여기서 deps로 지정된 값이 변하게 된다면 첫번쨰 인자인 함수가 실행을 하고 그 함수의 반환 값을 반환 해준다. deps는 depencency(의존성)을 뜻하며 useMemo가 deps에 의존하고 있다는 것을 말한다. import React, { useState, useCa..