React

* 이 글은 A complete guide to useEffect 를 번역 및 요약하였습니다. A Complete Guide to useEffect Effects are a part of your data flow. overreacted.io 11. 의존성을 솔직하게 적는 방법 (2) - 이펙트가 자급자족 하도록 하자 이펙트의 의존성에 있는 count를 제거해 봅시다. useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 여기서 생각을 해보죠? 무엇 때문에 deps의 count를 쓰고 있나요? 오직 setCount를 위해 사용하고 있습니..

* 이 글은 A complete guide to useEffect 를 번역 및 요약하였습니다. A Complete Guide to useEffect Effects are a part of your data flow. overreacted.io 보통 useEffect 를 쓸 때마다 뭔가 잘 들어맞지 않습니다. 클래스 컴포넌트의 라이프사이클 메서드와 비슷하다고 느낍니다만… 정말 그럴까요? 점점 시간이 지나면서 스스로에게 아래와 같은 질문을 하게 됩니다. 1. useEffect 로 componentDidMount 동작을 흉내내려면 어떻게 하지? 2. useEffect 안에서 데이터 페칭(Data fetching)은 어떻게 해야할까? 두번째 인자로 오는 배열([]) 은 뭐지? 3. 이펙트를 일으키는 의존성 배열..

Why? 지난 글 "컴포넌트 Re-rendering을 피하는 5가지 방법"에서 언급한 글에서 부족한 면들이 보여, 보완을 하기 위해 같은 주제를 가진 다른 글들을 살펴 보았습니다. 물론 공식문서를 이미 정독을 한 상황 이었고, 조금은 Advanced 한 내용들에 초점을 맞추어 검색을 해 보았지만, 입맛에 맞는 내용들을 찾지 못하였습니다. 그러던 도중 "Understanding re-rerendering and memoiztion in React"라는 제목에 글에 이끌리게 되었고, 짧은 글이었지만 핵심만을 전달하는 좋은 글이라고 생각되어 공유하게 되었습니다. 이 글은 약간의 팁과 더불어 왜 중요한지에 대한 당위성도 포함되어 있는 유익한 글이라 판단됩니다. 만약 지난 글 "컴포넌트 Re-rendering을 ..

Why? 개발자와 디자이너가 함께 협업하여 프로젝트를 완성하는 DND에서 사이드 프로젝트를 진행하고 있습니다. RN을 사용하면서 풀지 못할 숙제들을 풀어가는 일들이 굉장히 많았었는데, Global state를 관리하면서 느꼈던 여러 문제 중 한 가지를 공유하려고 합니다. useReducer와 useContext를 사용하여 Global state를 관리하였으나, context를 사용하여 가져다가 쓰는 구조 상 state 값이 업데이트될 때 re-rendering이 계속적으로 발생하는 상황을 마주하게 되었습니다. 이런 상황을 타개하기 위하여 최소한의 최적화가 필요 하였고, re-rendering에 관련된 글을 찾다 좋을 글을 발견하여 공유해 보려고 합니다. 만약 re-rendering에 발생하는 시점에 대한..