# Cleanup

11개의 포스트
post-thumbnail

React - 클린업으로 엄격모드 로그인 문제 해결하기

소셜 로그인으로 구현한 로그인 로직에서 동일한 사용자로 로그인을 시도했음에도 로그인이 잘되는 경우와 에러가 발생하는 경우가 발생했다. 성공이면 성공, 에러면 에러가 나와야 하는데, 잘 되기도 하고 안되기도 하고 개발 입장에서는 원인을 파악하기 어려운 상황이었다. 다행히 그 원인을 리액트 공식문서 학습에서 엄격 모드 때문임을 알게 되었다. 😢 문제 상황 동일한 사용자로 로그인을 시도하면 성공하는 경우도 있고 실패하는 경우도 발생 👀 문제 파악하기 개발자 도구 네트워크를 확인하니 로그인 요청이 두 번 발생하고 있다. ![](https://velog.velcdn

2023년 9월 1일
·
0개의 댓글
·
post-thumbnail

[React] useEffect와 Side Effect - 2

useEffect를 사용하는 경우 React에서는 Functional Component에서 sideEffect를 효과적으로 관리하기 위해 useEffect 라는 Hook을 제공합니다. 함수형 컴포넌트의 경우 아래와 같은 기본 구조를 가지기에, return문이 실행되어 JSX를 반환하기 전 실행되는 함수를 입력하면 Side Effect를 발생시킬 수 있게 됩니다. (참조) (이전 포스팅) useEffect와 Side Effect - 1 그런데 위와같이 UI를 그려주는 렌더링 과정 전에 Side Effect를 발생시키면 두 가지 문제가 발생하게 됩니다. >#### 렌더링 과정 전에 Side Effect가 발생하는 경우 Side Effect가 렌더링을 막습니다. UI가 그려지는 렌더링 과정마다 Side Effect가 실행되게 됩

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

[React] side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 "useEffect"

프로그래밍에서 Side Effect란? > 함수가 함수 내부의 값 외에 외부의 값을 읽어오거나, 수정하는 행위 Side Effect의 예시 1. side effect가 있다 외부의 상태를 읽어올 때 함수가 함수 내부의 값(local state)를 제외한 나머지 값(non local state)들을 읽어올 때 side effect가 있다고 말한다. 2. side effect가 발생했다 외부의 상태를 변경 시킬 때 함수가 함수 내부에 있는 값이 아닌, 외부의 값을 변경시킬 때 side effect가 발생했다고 말한다. 1. 외부의 변수 값을 변경했을 때 2. DOM 조작 3. console에 특정문자 출력 프로그래밍에서 side effect는 기피해야 하는 대상일까? > Yes → 동작 결과를 예측하기 쉽지 않고 유지보수가 어렵기 때문이다.

2022년 9월 4일
·
0개의 댓글
·

[리액트를 다루는 기술] useEffect의 cleanup 함수로 mount & unmount 확인

mount 시 'mount effect' 호출 및 name 변수가 생성되므로 'effect'도 호출 name 값 변경 시 'cleanup'을 출력 & 직전 name 값 출력 unmount 시 'unmount cleanup' 호출 및 name 변수 사라지므로 'cleanup'도 호출 개발자 도구에서 mount -> unmount -> mount 되는 현상 React.StrictMode로 되어있어 개발자 도구에 보이는 것만 위처럼 보일 뿐 정상 작동 중이라고 함(참고: https://funveloper.tistory.com/110)

2022년 9월 2일
·
0개의 댓글
·
post-thumbnail

[React] 유데미 React 강의 복습노트 #3

Effects, Reducers side Effect는 무엇인지 리듀서가 있는 컴포넌트에서 복잡한 state를 관리하는 방법 what is "Effect" UI랜더링 & 사용자 입력 반응하는 것 이외에 애플리케이션에서 일어나는 다른 모든 것을 뜻한다. ex) http 요청을 보내는 것 또는 브라우저 저장소에 무언가를 저장하는 것 side effect는 직접적으로 컴포넌트 함수에 들어가면 안된다. 버그나 무한 루프가 발생할 가능성이 높기 때문이다. 그러므로 사이드 이펙트를 처리하는 좋은 도구가 필요한데 리액트 훅을 사용하면 된다. UseEffect의 cleanup 사용 예시 ![](https://velog.velcdn.com/images/choi46910/post/

2022년 7월 28일
·
0개의 댓글
·
post-thumbnail

React Side effect

Side effect React의 주요 업무 리액트 라이브러리의 주요 작업은 단언컨데, 사용자의 이벤트에 상호작용하여 컴포넌트를 그에 맞게 렌더링 혹은 리 렌더링 하는 것 입니다. 하지만 앱을 만드는데 있어 프론트엔드가 해야할 부분이 그것만 있는 것은 아니죠. 로컬 저장소 데이터를 저장하거나, 잠정적 에러를 처리하거나, http request 를 보내는 것도 필요합니다. side effect 는 컴포넌트를 다루는 주요 업무외에 어플리케이션에 필요한 작업을 말합니다. 리액트 자체가 필요한 업무나 관련된 업무는 아니기에, 리액트와는 별개로 독립적으로 운영되어야 하는 부분입니다. > 만약 리액트 컴포넌트 안에서 API를 요청하는 함수를 만들었다고 해봅시다. 리액트는 상태에 따라, 해당 컴포넌트를 리렌더링 할텐데, 계속 요청을 반복해서 보내게 되지 않을까요?? useEffect() useEffect()는 useState() 와 마찬가지로 별도의 리액트

2022년 6월 25일
·
0개의 댓글
·

react 맛보기 (2)

- 리랜더링 바닐라js에서는 변경으로 인해 element를 다시 그리고, React 에서는 변경된 부분만 다시 그림 리액트의 앨리먼트는 불변 객체 변경 사항 반영 리액트에게 일임 (리액트의 알고리즘) 리액트의 비교: reconciliation virtual DOM를 비교하여 리랜더링 함 이벤트 핸들러 JS: on{event} or addEventLister React: on{Event} (case 주의) Object.assign 객체 내용 복사 전역 변수 변경 -> ReactDOM.render (render 호출) - 컴포넌트 화면의 구성요소로 앨리먼트의 집합 useState : react가 제공해주는 컴포넌트속 엘리먼트 상태를 관리해주는 hook useState에 기본값을 넣어주면 배열로된 두가지 값이 밖으로 나오는데, state와 setstate(state지정해주는 함수) - 사이드이펙트 부수 효과 특정값이 바뀔때 어떠한 행동을 하고 싶다 그 행동

2022년 5월 13일
·
0개의 댓글
·

CleanUp

CleanUp 함수 : 컴포넌트가 destroy될 때 뭔가 할 수 있도록 하는 함수 useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다. 이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다. 위 코드는 아래의 코드와 같은 이야기를 한다. Hello 컴포넌트가 생성될 때 hiFn 이 실행되고("Created"출력) hiFn이 byeFn을 return해줌으로서 컴포넌트가 파괴될 때를 알 수 있다. 매번 사용하지는 않을 것이지만 알아두면 필요할 때 유용한 cleanUp

2022년 1월 12일
·
0개의 댓글
·
post-thumbnail

[react] useEffect - cleanUp

니꼬쌤은 useEffect에서 cleanUP 부분을 자주 사용하진 않는다고 하지만, 그래도 필요할 때 사용할 수 있다고 해서 정리해본다. 다음 버튼의 예시로 설명해보자. 이 버튼의 default는 show버튼일 때인데, 클릭하면 다음과 같이 Hello라는 글자가 보이고 버튼은 hide로 바뀌는 예제이다. App component의 코드는 다음과 같다. 이 부분은 이전 포스팅과 중복되서 설명은 생략한다. ![](https://images.velog.io/images/natural_min/post/02f14a9e-bc78-4580-a

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

react + firebase + snapshot

TOC snapshot을 반환하지 않을 경우 생기는 문제 해결책 1. snapshot을 반환하지 않을 경우 생기는 문제 firebase에서 snapshot은 database에 대한 변화를 observing하고 있다. metadata, serverTimeStamp options등을 제공하기도 한다. 링크 아무튼 디버깅을 하던 와중에 마주친 버그를 해결함과 동시에 다시 잊지 않기 위해 포스팅을 이어나갑니다. This is a no-op, but it indicate

2021년 6월 7일
·
0개의 댓글
·
post-thumbnail

React Hook + API

useEffect 이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 처음 나타났을 때, 사라질 때, 특정 props가 바뀔 때, 함수를 넣어서 작업을 수행하는 useEffect입니다. > 클래스형과 단순 비교하면 위와 같습니다. useEffect를 이해하기 위해서는 clean up함수와 effect함수를 알고 넘어가야 좋습니다. > Effect 이펙트 함수는 useEffect의 본 역할을 한다고 생각할 수 있습니다. 특정한 작업을 처리하는데요. 여기서 '어느 시점에 작업을 처리하는가?' 이 궁금증을 해결해야만 useEffect를 이해하겠죠. 질문에 대한 답은 렌더링 이후 발생한다 입니다. 이해를 돕기 위한 과정을 보면 > 렌더링 => 돔 업데이트 => 이펙트 컴포넌트가 렌더링을 하고 결과물을 리액트에게 알립니다. 이 과정에서 리액트는 '이펙트' 함수를 기억합니다. 그리고 브라우저를 통해 DOM을 업데이트 합니다. 그리고 나서 이펙트를

2021년 1월 19일
·
0개의 댓글
·