본문 바로가기

전체 글

 (60)
[React] useCallback을 왜 제거할까? 문제 발생 - 사용자를 초대한 상태인데 똑같은 사용자를 초대했을 때 어떤 식으로 작동할까라는 예외사항을 만들어보았다. 역시나, 초대된 사용자를 X버튼을 눌러서 초대를 취소했을 때, 똑같은 사용자가 표시 된다. - 또, 닉네임을 입력하게 되면 입력된 만큼 query에 cache되는 모습을 확인 할 수 있다. 해결 방법- 초대 버튼을 누르면 무조건 refetch()가 되기 떄문에, 초대자에 해당 닉네임이 없을 때만 refetch()가 될 수 있게 조건 문을 설정하였다. 맨 처음에는 useCallback으로 감싸져 있어서, contributors, inputValue를 업데이트가 안되어서 계속 오류가 났었는데, useCallback을 감싼 로직을 삭제했다. - 그런데, useCallback을 사용해도 cont..
[React] useCallback은 무엇일까? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. 즉, 함수가 정의되고, 리랜더링이 일어나고 의존성 배열이 바뀌지 않는다면 함수는 새로 만들어지지 않고 기존의 함수가 반환됩니다. 사용법 import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // ... - 리렌더링 사이에 캐시할 함수, 함..
[js 알고리즘] 백준 9009: 피보나치 문제 피보나치 수 ƒK는 ƒK = ƒK-1 + ƒK-2로 정의되며 초기값은 ƒ0 = 0과 ƒ1 = 1 이다. 양의 정수는 하나 혹은 그 이상의 서로 다른 피보나치 수들의 합으로 나타낼 수 있다는 사실은 잘 알려져 있다. 하나의 양의 정수에 대한 피보나치 수들의 합은 여러 가지 형태가 있다. 예를 들어 정수 100은 ƒ4 + ƒ6 + ƒ11 = 3 + 8 + 89 또는 ƒ1 + ƒ3 + ƒ6 + ƒ11 = 1 + 2 + 8 + 89, 또는 ƒ4 + ƒ6 + ƒ9 + ƒ10 = 3 + 8 + 34 + 55 등으로 나타낼 수 있다. 이 문제는 하나의 양의 정수를 최소 개수의 서로 다른 피보나치 수들의 합으로 나타내는 것이다. 하나의 양의 정수가 주어질 때, 피보나치 수들의 합이 주어진 정수와 같게 되는 최소 ..
[React] useEffect()를 제거해보자! effect를 제거했을 때 이점 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 오류 발생 가능성이 줄어든다. 불필요한 Effect를 제거하는 방법 1. 렌더링을 위해 데이터를 변환하는 경우 - 렌더링 과정: React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산한다 -> 화면 업데이트 -> Effect 실행 - Effect를 이용하여 state를 즉시 업데이트 한다면, 전체 프로세스가 처음부터 다시 시작된다. - 즉, 불필요한 렌더링이 발생한다. - 해결법: 데이터 변환을 컴포넌트 최상위 레벨에서 진행하면, props나 state가 변경될 때 해당 코드가 다시 실행된다. 2. 사용자 이벤트를 처리하는 경우 - 이벤트 핸들러를 제작할 경우 어떤 일이 일어나는지 정확하게 알 수 있지만..
[react-query] 실행 시점 enabled, refetch를 이용하고, cache된 데이터 삭제 문제 발생- 닉네임을 입력하고, 초대를 누르고 해당 닉네임이 있다면 닉네임이 나옵니다. 처음에 똑같은 닉네임을 검색했다면, 초대 버튼을 누르지 않아도 리스트에 닉네임이 표시되는 문제점이 발생하였습니다.    - 로직에서 enabled를 이용하여 초대 버튼을 클릭시 enabeld가 true가 되며, useEffect를 이용하여 데이터가 변경되면 enabled가 false가 되게 처리하였습니다. 하지만 useEffect를 제거하고 로직을 개선의 필요성을 느꼈습니다.//enabled를 이용한 기존 코드const useGetUser = ({ q, enabled }: { q: string, enabled: boolean }): UseQueryResult => { return useQuery([USER_API_K..
[JS 알고리즘] 병합 정렬이란? 병합 정렬이란? - 병합 정렬의 경우에는 분할 정복 알고리즘을 사용하고 있다. - 분할 정복은 더 이상 쪼갤 수없는 크기가 될 때까지 분할해야하기 때문에 재귀함수로 구현해야한다. - 단점: 재귀함수를 사용하게 되면 함수 호출이 많이 발생되며, 오버헤드가 발생한다. 즉, 메모리를 많이 사용하게 된다. - 장점: 시간 복잡도 O(NlogN)을 보장하는 빠른 정렬 알고리즘이다. 분할 정복이란? 1. 분할(divide): 큰 문제를 작은 부분 문제(쉬운 문제)로 분할한다. 2. 정복(conquer): 작은 부분 문제를 각각 해결한다. 3. 조합(combine): 해결한 부분 문제의 답을 이용하여 다시 큰 문제를 해결한다. 병합 정렬 동작 방식 => 각 부분 배열은 이미 정렬된 상태로 보며, 각 부분 배열의 첫번..
[JS알고리즘] 선택 정렬, 버블 정렬, 삽입 정렬 선택 정렬, 버블 정렬, 삽입 정렬은 시간 복잡도 O(n^2)로 비효율적인 정렬 알고리즘입니다. 선택 정렬 - 선택 정렬은 매 단계에서 가장 작은 원소를 선택해서 앞으로 보내는 정렬 방법입니다. - 각 단계에서 가장 작은 원소를 선택하고 현재까지 처리되지 않은 원소들 중 가장 앞의 원소와 위치를 교체합니다. - 매 단계에서 가장 작은 것을 선택하는 데에 약 N번의 연산이 필요하다. 5 4 3 2 1 1단계: 첫 단계에서 제일 작은 수는 1입니다. 1 5 4 3 2 2단계: 그 다음 제일 작은 수는 2입니다. 1 2 5 4 3 3단계: 그 다음 제일 작은 수는 3입니다. 1 2 3 5 4 4단계: 마지막으로 제일 작은 수는 4입니다. 1 2 3 4 5 const selectSolution = (arr) =..
[React-Query] 대댓글 기능 중 댓글 삭제 시 해당 대댓글 다시 불러오는 현상 해결 주요 기능지금 현재하는 프로젝트에서 댓글을 수정, 삭제, 답글을 달 수 있는 기능이 있다. 주요 기능을 설명하자면,1. 댓글 등록 기능2. 등록된 댓글 수정, 삭제, 대댓글 등록 가능3. 대댓글 등록 시 수정, 삭제 기능 4. 각 기능 별로 바뀌는 탭 바 문제 사항이런 식으로 구현이 되는데, 댓글 조회, 수정, 삭제, 등록, 상태별 바뀌는 탭 바는 최상위 부모 컴포넌트에서 제작을 하였다.  그래서 컴포넌트의 구조가 Comment->CommentList->CommentItem->ReplyCommentList->ReplyCommentItme 으로 구성이 되어 있는데,댓글 조회:Commnet, 대댓글 조회:ReplyCommentList로 불러온다. 이때 댓글을 조회,수정,삭제는 상단에서 관리해서 수월했지만, ..

티스토리툴바