렌더링

* 이 글은 You might not need an effect 를 번역하였습니다. You Might Not Need an Effect A JavaScript library for building user interfaces beta.reactjs.org TL;DR 렌더링을 하는 동안 어떤 것을 계산해야 한다면, effect를 사용하지 말아주세요. 무거운 계산들을 캐시하려면, useMemo를 사용해주세요. 모든 컴포넌트 트리의 상태 값을 초기화 시키기 위해서는 다른 key를 전달해주세요. prop 의 변경에 대한 응답으로 상태값을 초기화 시키기 위해서는, 렌더링 중에 해주세요. 컴포넌트가 유저에게 이미 노출되었다면 코드는 effect에 있어야하고, 나머지는 event 안에 있어야 합니다. 여러 컴포넌트 ..

* 이 글은 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. 이펙트를 일으키는 의존성 배열..

1. SPA: Single Page Application 가. 특징 SPA는 브라우저에서 자바스크립트를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작 서버 측에서는 텅빈 HTML 문서 하나와 자바스크립트 코드만 내려줌 → 이후에 모든 일들은 클라이언트 측에서 브라우저가 비동기로 처리 SPA는 브라우저에서 페이지 소스 보기를 하면 다음과 같이 요소 아래에 요소 하나만 있는 경우가 허다함 나. 장점 클라이언트에서 최초에 한 번 자바스크립트 코드를 내려받으면 그 이후로는 서버와 네트워크 통신을 할 필요가 없음 일반적인 웹사이트처럼 페이지 별로 끊어지는 느낌이 없음 사용자 경험 측면에서는 확실한 강점이 있음 다. 단점 지나치게 자바스크립트에 의존적임 → 자바스크립트가 돌아가지 않은 브라우징..