MOLLY

0. TL;DR 1. Custom Hook: 컴포넌트 간 로직을 공유할 때 사용 2. 컴포넌트로부터 Custom Hook 추출하기 3. 작명 규칙 4. Custom Hook은 state 자체를 공유하는 게 아니라 state 저장 로직을 공유함 5. Custom Hook 작명법 6. Custom Hook으로 Effect를 감싸는 것이 종종 유용한 이유 헐 이게 대체 뭐야?! 아아.. 모르는가? 이건 바로 'Custom Hook’이라고 하는 것이다. Custom Hook 최고!!!!! 0. TL;DRCustom Hook을 사용하면 컴포넌트 간 로직을 공유할 수 있음Custom Hook의 이름은 use 뒤에 대문자로 시작되어야 함Custom Hook은 state 자체가 아닌 state 저장 로직만 공유함Cus..

0. TL;DR1. 불필요한 Effect를 제거하는 방법2. 비용이 많이 드는 계산 ⇒ 캐싱 처리3. prop 변경 시 모든 state 초기화4. prop이 변경될 때 일부 state 조정5. 이벤트 핸들러 간 로직 공유6. 데이터 Fetching할 때 고려할 점   Effect가 필요하지 않을 수도 있다 (You Might Not Need an Effect)외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우), Effect가 필요하지 않다.  0. TL;DR비용이 많이 드는 계산을 캐시하려면 useEffect 대신 useMemo를 추가하자전체 컴포넌트 트리의 state를 초기화하려면 다른 key를 전달하자컴포넌트가 표시되..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때  Effect로 동기화하기 (Synchronizing with Effects)Effect를 사용하면 렌더링 후, 특정 코드를 실행하여 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.  0. TL;DREffect는 특정 상호작용이 아닌 렌더링 자체에 의해 발생코드가 다시 실행되길 원하지 않는 경우, Effect 내부 코드를 수정하여 의존성 배열에 해당 종속성이 필요하지 않도록 만들자Effect를 사용하면 컴포넌트를 외부 시스템(타사 API, 네트워크 등)과 동기화 가능Effect는 모든 렌더링(초기 렌더링 포함) 후에 실행됨Effect가 다시 마운트로 인해 중단된 경우 클..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때 Ref로 DOM 조작하기 (Manipulating the DOM with Refs)React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없다.   그럼 뭐 어쩔 때 사용하냐특정 노드에 포커스를 옮기거나스크롤 위치를 옮기거나위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때⇒ React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에, DOM 노드에 접근하기 위한 *ref*가 필요  0. TL;DR한 컴포넌트에서 하나 이상의 ref를 가질 수 있다.ref는 보통 포커싱, 스크롤..

0. TL;DR1. ref 사용하는 법2. ref와 state의 차이3. refs를 언제 사용해야 할까?   Ref로 값 참조하기 (Referencing Values with Refs)0. TL;DR컴포넌트가 일부 정보를 “기억”하게 하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하고 싶을 때 Ref를 사용하자!ref는 읽거나 변경할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체ref를 변경하더라도, 리렌더링 되지 않는다.렌더링 중에 ref.current를 읽거나 변경하지 말자. 건들면 컴포넌트를 예측하기 어렵게 된다.  1. ref 사용하는 법// (1) useRef를 import 해서 ref 추가import { useRef } from 'react';export de..

0. 수정된 코드 및 과정 요약1. 코드에서 Column name을 수정2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정4. 결론  에..?.. 제가 수척해진 농담곰으로 보이시나요?..  해결은 했지만 6시간 삽질해서 햄듭니다..   한 장소의 스크랩 여부가 다른 장소와도 동일하게 적용되는 문제 해결0. 수정된 코드 및 과정 요약    [원인] 전에 Supabase 컬럼을 설정할 때 id가 user_id와 study_place_id로, 총 2가지가 들어가는데 어떤 id에 기준(u..

1. 노베이스에서 토스 합격까지 (출처: Eddy)2. Managing State  |  Reacting to Input with State3. Managing State  |  Choosing the State Structure4. Managing State  |  Sharing State Between Components5. 금일 소감  1. 노베이스에서 토스 합격까지 (출처: Eddy) https://velog.io/@eddy_song/retrospective 위 글이 꽤 와닿아서 갖고 와봤다. 위 사진은 내가 전에 부트캠프에서 프로그래밍을 배우다가 그만둬야 하나 싶은 생각이 들던, 한창 힘들 때 봤던 내용의 그림이다. 유명한 글이긴 하나, 링크 속 블로그에서도 그 내용이 나와있어서 좀 놀랐다. 글..

1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트2. [프로필 정보] - [유형]이 안 보임  ⮕ NextUI Select의 defaultselectedkeys 속성이 적용되지 않아서 placeholder로 대체해 해결3. 금일 소감  1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트몰랐는데 수정하고 나서 수정되었다는 토스트 알림도 안 뜨고, 수정한 댓글이 새로고침 해야만 반영이 되고 있었다. 토스트 알림은 코드를 작성하지 않아서 안 떴던 것수정한 댓글이 새로고침 해야만 반영되는 건 댓글을 수..

1. Immer2. React에서 State 변형을 권장하지 않는 이유 5가지3. State의 배열 업데이트하는 법4. 금일 소감  오늘은 Study 때 내가 맡지 않았던 React 공식 문서 파트를 읽었다. 약간 밀렸어서 직전 스터디까지의 분량을 후루룩 읽었다. 새롭게 알게 된 부분과 궁금했던 부분에 대한 호기심이 풀려서 그 내용을 위주로 작성해 보려 한다!  1. Immer : React에서 불변성(immutable state)을 관리하기 위한 라이브러리Immer는 상태 업데이트 로직을 간단하고 읽기 쉬운 방식으로 작성할 수 있도록 해, 복잡한 객체의 불변 업데이트를 간단한 방법으로 처리할 수 있다. 기본적인 useState 훅과 유사하게 작동하며, 상태를 불변성을 유지하면서 업데이트할 수 있도록 도..

1. Adding Interactivity | Responding to Events2. Adding Interactivity | State: A Component's Memory3. Adding Interactivity | Render and Commit4. Adding Interactivity | State as a Snapshot5. 금일 소감 1. Adding Interactivity | Responding to Events0. TL;DR이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙이는 것이 일반적규칙에 따라 이벤트 핸들러 prop은 on으로 시작해야 하며 카멜케이스로 작성e.stopPropagation(): 위의 태그에 연결된 이벤트 핸들러의 실행을 중지e.preventDefault(..