스페이스 루미

리액트 공식문서 스터디 리액트 공식 문서를 교재로 삼아 시작한 스터디. 리액트 공식문서 한글번역을 병행하면서 문장다듬고, (사실 번역기가 다함) 정리하면서 공부하는 방식으로 진행했다. 현생이 바빠서 아슬아슬하게 광탈당할 뻔 했는데, 스터디원분들 합의하에 한주 미뤄져서 (6주차에 끝날 예정이였던것을 7주차로) 다행히 완주 할 수 있었다. 또 감사합니다. 기존의 리액트 공식문서로 하려다가, 회사동료가 리액트 Beta 문서를 추천해줘서, 문서의 퀄리티를 보고 이걸로 해야겠다고 결정했다. 스터디 도중에 Beta가 공식문서로 전환되었고, 유의미한 결과를 얻을 수 있었다. 이전 공식문서에서는 클래스형 컴포넌트가 포함돼있었는데 우리가 학습한것에는 없었기 때문. 시간도 절약되고 좋았다. 처음에는 시중에 있는 리액트 도..

Escape Hatches : 커스텀 Hook으로 로직 재사용하기 React에는 useState, useContext, useEffect와 같은 몇 가지 내장 Hook이 있습니다. 때로는 데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나, 채팅방에 연결하는 등 좀 더 구체적인 목적을 위한 Hook이 있었으면 좋겠다는 생각이 들 때가 있습니다. React에서 이러한 Hook을 찾지 못할 수도 있지만 애플리케이션의 필요에 따라 자신만의 Hook을 만들 수 있습니다. 학습 내용 커스텀 Hook의 정의와 직접 작성하는 방법 컴포넌트 간에 로직을 재사용하는 방법 커스텀 Hook의 이름을 지정하고 구조화하는 방법 커스텀 Hook을 추출해야 하는 시기와 이유 커스텀 훅: 컴포넌트 간 로직 공유 대부분의 앱이 ..

Escape Hatches : 이벤트와 효과 분리하기 이벤트 핸들러는 동일한 인터랙션을 다시 수행할 때만 다시 실행됩니다. 이벤트 핸들러와 달리 이펙트는 prop이나 상태 변수처럼 읽은 값이 마지막 렌더링 때와 다른 경우 다시 동기화합니다. 때로는 두 가지 동작을 혼합하여 일부 값에는 반응하지만 다른 값에는 반응하지 않는 이펙트를 원할 수도 있습니다. 이 페이지에서는 이를 수행하는 방법을 설명합니다. 학습 내용 이벤트 핸들러와 이펙트 중에서 선택하는 방법 이펙트는 유동적이고 이벤트 핸들러는 유동적이지 않은 이유 이펙트 코드의 일부가 반응하지 않도록 하려면 어떻게 해야 할까요? 이펙트 이벤트가 무엇이며, 이펙트에서 추출하는 방법 이펙트 이벤트를 사용하여 이펙트에서 최신 props와 state를 읽는 방법 ..

** 깃북을 닫았습니다 Escape Hatches : 유동적인 Effect의 라이프사이클(생명주기) 이펙트는 컴포넌트와 다른 라이프사이클을 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. 이펙트는 동기화를 시작하고 나중에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. 이 사이클은 시간이 지남에 따라 변하는 props와 상태에 의존하는 Effect의 경우 여러 번 발생할 수 있습니다. React는 이펙트의 종속성을 올바르게 지정했는지 확인하는 린터 규칙을 제공합니다. 이렇게 하면 이펙트가 최신 props와 state에 동기화됩니다. 학습 내용 이펙트의 라이프사이클이 컴포넌트의 라이프사이클과 다른 점 각 이펙트를 개별적으로 생각하는 방법 이펙트를 다시 동기화해야 하는 시기와 그..

Effect와 동기화 일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어, React 상태에 따라 비 React 컴포넌트를 제어하거나, 서버 연결을 설정하거나, 컴포넌트가 화면에 표시될 때 분석 로그를 전송하고 싶을 수 있습니다. Effect를 사용하면 렌더링 후 일부 코드를 실행하여 컴포넌트를 React 외부의 시스템과 동기화할 수 있습니다. 학습 내용 Effect란 무엇인가요? Effect가 이벤트와 다른 점 컴포넌트에서 Effect를 선언하는 방법 불필요한 Effect 재실행을 건너뛰는 방법 개발 과정에서 Effect 두 번 실행되는 이유와 해결 방법 Effect란 무엇이며 이벤트와 어떻게 다를까요? Effects에 대해 알아보기 전에 React 컴포넌트 내부에 있는 두 가지 유형의 로직에..