개발기록

React에는 useState, useContext, useEffect 등 복수의 미리 내장된 훅이 존재합니다. 다만, 데이터를 얻거나 사용자의 온라인 상태를 감시, 대화방의 접속 등, 보다 특화된 목적을 위해 훅이 필요할 때가 있을 겁니다. React에는 이런 훅들이 존재하지만, 어플리케이션의 요구에 맞추어 독자적인 훅을 작성할 수 있습니다.이 페이지에서 배우는 것· 커스텀 훅은 무엇이며, 어떻게 스스로 작성할지· 컴포넌트 간 로직을 재이용하는 방법· 커스텀 훅의 명명과 구성 방법· 커스텀 훅의 export 타이밍과 이유 커스텀 훅: 컴포넌트 간 로직 공유네트워크에 크게 의존하는 어플리케이션을 개발한다고 생각해봅시다(대부분 어플리케이션이 그렇긴 하지만). 어플리케이션 사용 중에 사용자의 네트워크 접속이..

이펙트 코드를 작성할 때, 린터는 이펙트가 읽어내는 모든 반응적인 값(props나 상태 값 등)이 이펙트의 의존 값 배열에 포함되어있는지 확인합니다. 이것으로, 이펙트가 컴포넌트의 최신 props나 상태 값과 동기화된 상태를 유지할 수 있습니다. 불필요한 의존 값이 있다면, 이펙트가 너무 빈번하게 실행되거나, 무한 루프가 발생하는 경우가 있습니다. 이 가이드에선, 이펙트에서 필요 없는 의존 값을 찾아, 제거하는 방법을 설명합니다.이 페이지에서 배우는 것· 이펙트 의존 값에 수반하는 무한 루프를 수정하는 방법· 의존 값을 제거하고 싶을 경우 해야할 것· 이펙트 내에 '반응'하지 않고 값을 읽어 내는 방법· 객체 형태나 함수 형태의 의존 값을 피하는 이유와 그 방법· 의존 배열의 린터를 제어하는 위험성과, ..

이벤트 핸들러는, 유저가 같은 조작을 반복할 때만 재실행됩니다. 이펙트는 이벤트 핸들러와는 다르게, props나 상태 값 변수와 같은 것이 읽어 들여지는 값이 저번 렌더와 다를 때 '재동기화'를 실행합니다. 또, 양쪽의 조작을 섞어, 어떤 값에는 반응해 재실행되지만 다른 값에는 반응하지 않는 이펙트를 원할 때도 있습니다. 이 페이지에선, 이 방법을 설명합니다. 이 페이지에서 배우는 것· 이벤트 핸들러와 이펙트 둘 중 무엇을 고를지· 이펙트가 반응적이고, 이벤트 핸들러가 정적인 이유· 이펙트의 코드 일부를 반응적으로 만들고 싶지 않은 경우의 대처법· 이펙트 이벤트는 무엇인지, 그리고 이펙트에서 이펙트 이벤트를 분리하는 방법· 이펙트 이벤트를 사용해 이펙트에서 최신 props와 상태 값을 읽어내는 방법 이벤..

이펙트는 컴포넌트와는 다른 라이프 사이클을 가지고 있습니다. 컴포넌트는, 마운트, 갱신, 언마운트를 행하는 것이 가능합니다. 이펙트는 두 가지만 가능합니다. 동기화를 시작하거나, 중지하는 것만 가능합니다. 이펙트가 props나 상태에 의존해, 이것들이 시간과 함께 변화하는 경우, 이 사이클은 반복하게 됩니다. React에선, 이펙트의 의존 배열이 적절이 지정되어있는지 확인하는 린터 규칙이 제공되어 있습니다. 이것으로, 이펙트가 최신 props나 상태와 동기화된 상태를 유지하는 것이 가능합니다.이 페이지에서 배우는 것· 이펙트의 라이프 사이클과 컴포넌트의 라이프 사이클 차이· 각 이펙트를 독립적으로 고려하는 방법· 언제, 왜 이펙트를 재동기화할 필요가 있는지· 이펙트의 의존 배열을 정하는 방법· 값이 반응..

이펙트는 React의 패러다임으로부터의 도피 수단이다. React 바깥에 '나아가', React가 아닌 위젯, 네트워크, 혹은 브라우저 DOM 등의 외부 시스템과 동기화하는 것이 가능합니다. 외부 시스템이 관여하지 않은 경우(예를 들어, props나 상태의 변화에 맞춰 컴포넌트의 상태를 갱신하고 싶을 경우), 이펙트는 필요하지 않습니다. 불필요한 이펙트를 삭제하는 것으로, 코드가 읽기 쉬워지고, 실행 속도가 높아지고, 에러가 발생하기 어려워집니다.이 페이지에서 배우는 것· 컴포넌트에서 불필요한 컴포넌트를 삭제하는 이유와 방법· 이펙트를 사용하지 않고 오래 걸리는 계산을 캐시하는 방법· 이펙트를 사용하지 않고 컴포넌트의 상태를 초기화, 또는 조정하는 방법· 이벤트 핸들러 사이에 로직을 공유하는 방법· 이벤..

일부 컴포넌트는 외부 시스템과 동기 작업을 수행할 필요가 있습니다. 예를 들어, React의 상태에 기초하여 React가 아닌 곳에서 제작한 컴포넌트를 제어하거나, 서버와의 접속을 확립하거나, 컴포넌트가 화면에 표시되었을 때 분석용 로그를 송신하거나 받고 싶을 수도 있습니다. 이펙트(Effect)를 사용함으로써, 렌더 후에 코드를 실행하여, React 외 시스템과 컴포넌트를 동기화할 수 있습니다.이 페이지에서 배우는 것· 이펙트가 무엇인지· 이펙트와 이벤트의 차이· 컴포넌트로 이펙트를 선언하는 방법· 불필요한 이펙트 재실행을 스킵하는 방법· 개발중에 이펙트가 2회 실행되는 이유와 대처법 이펙트란 무엇이며, 이벤트와 어떻게 다른가이펙트에 대해 설명하기 전, React 컴포넌트 내 두 종류의 로직에 대해 이..

React는 렌더 결과와 일치하도록 자동으로 DOM을 갱신하기 위해, 컴포넌트로 DOM을 조작할 필요는 보통 없습니다. 다만, 노드에 포커스를 주거나, 스크롤하도록 하거나, 크기나 위치를 측정하는 경우, React가 관리하는 DOM 요소의 접근이 필요할 때가 있습니다. React에는 이것을 행하는 내장된 방법이 존재하지 않기 때문에, DOM 노드를 참조하는 ref가 필요해집니다.이 페이지에서 배우는 것· React가 관리하는 DOM 노드에 ref 속성을 사용해 접근하는 방법· ref JSX 속성이 useRef 훅과 어떻게 연관되어 있는지· 다른 컴포넌트의 DOM 노드에 접근하는 방법· React가 관리하는 DOM을 안전하게 변경할 수 있는 경우는 어떤 것이 있는지 노드를 향한 ref의 취득React가 관..

컴포넌트에 따라서는, React 외의 시스템에 대응하여 제어나 동기화를 필요로하는 경우가 있습니다. 예를 들어, 브라우저 API를 사용해 입력 필드에 집중을 시키거나, React를 사용하지 않고 추가된 비디오 플레이어 재생이나, 일시정지를 행하는, 이른바 리모트 서버에 접속해 메시지를 듣는(listen) 것을 말합니다. 이 장에서는, React의 '바깥으로 나가며' 외부 시스템에 접속하기 위한 탈출구(escape hatch)를 배우게 됩니다. 어플리케이션 로직과 데이터 흐름의 대부분은, 이 기능에 의존하지 않도록 해야합니다. 컴포넌트에 정보를 '기억'시키고 싶지만, 그 정보가 새롭게 렌더 일으키지 않도록 하고 싶은 경우, ref를 사용할 수 있습니다.이 장에서 배우는 것· 컴포넌트에 ref를 추가하는 방..

리듀서를 사용하면, 컴포넌트의 상태 갱신 로직의 양을 줄일 수 있습니다. 컨텍스트를 사용하면, 다른 컴포넌트에 깊이 들어있는 정보를 건네주는 것이 가능합니다. 그리고 리듀서와 컨텍스트를 짜임새있게 구성하는 것으로, 복잡한 화면의 상태 관리가 가능해집니다.이 페이지에서 배우는 것· 리듀서와 컨텍스트를 함께 구성하는 방법· 상태와 디스패치 함수를 props를 통해 건네는 것을 피하는 방법· 컨텍스트와 상태 로직을 다른 파일로 보존하는 방법리듀서와 컨텍스트의 구성리듀서의 도입을 설명한 글에서 소개한 아래의 예시에서는, 상태는 리듀서에 의해 관리되고 있습니다. 리듀서 함수는 파일의 아래 부분에 선언되었기 때문에, 그곳에 상태 갱신 로직이 전부 포함되어 있습니다.// App.jsimport { useReducer..

보통, 부모 컴포넌트에서 자식 컴포넌트에 props를 사용해 정보를 전달합니다. 다만, props를 다수의 중간 컴포넌트를 경유해 전달하지 않으면 안되는 경우나, 어플리케이션 내의 많은 컴포넌트가 같은 정보를 필요로하는 경우, props를 받아 전달하는 것은 장황하고 불편한 것이 될 수 있습니다. 컨텍스트(Context)를 사용하는 것으로, 부모 컴포넌트로부터 props를 명시적으로 건넬 때, 아래의 트리 내 임의 컴포넌트가 정보를 얻을 수 있습니다.그 페이지에서 배울 수 있는 것· "props의 구멍을 파는 작업(props drilling)"은 무엇인지· 컨텍스트를 사용해 props의 장황한 건네 받기를 없애는 방법· 컨텍스트의 일반적인 용도· 컨텍스트의 대체 수단props를 받고 넘겨주는데에 동반되는..