차근차근 배움터

섹션13. 컴포넌트를 구축하는 다른 방법: 클래스 컴포넌트 컴포넌트를 빌드하는 다른 방법이 있다! 클래스를 이용한 컴포넌트 빌드이다. 최근의 리액트 프로젝트에서는 거의 이 방법을 사용하지 않을 것입니다 하지만 이 방법을 사용했던 프로젝트들이 많을 수 있기 때문에 설명한다.

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/12-a-look-behind-the-scenes 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

useMemo를 useCallback보다 덜 자주 쓰게 될 것이다 데이터를 기억하는 것이 더 ※ useMemo를 이용하여 데이터를 저장하면 이는 메모리를 사용하는 것이다. 그렇다면 useMemo와 useCallback의 차이는.....? useMemo: useMemo는 계산 비용이 큰 함수의 결과 값을 메모이제이션하는 데 사용됩니다. useMemo(callback, dependencies) 형태로 사용되며, callback 함수를 실행한 결과 값을 기억합니다. dependencies 배열은 useMemo의 재계산을 트리거하는 의존성 목록입니다. 의존성이 변경되지 않는 한 이전에 계산한 결과를 재사용합니다. useMemo는 불필요한 계산을 방지하고 성능을 향상시킬 수 있습니다. 주로 계산 비용이 많이 드는..

리액트가 상태에 대한 갱신을 어떻게 하는 지 Scheduled State Change 상태 갱신 예약 즉 동시에 여러 번의 갱신이 스케줄될 수 있으므로 상태를 갱신할 때는 함수 형태를 이용해서 갱신하는 것을 추천한다 이전 상태의 스냅샷에 의존해야 하는 경우는 특히 그렇다 함수 형태를 사용해야 리액트가 미완료된 상태 변경 작업에 대하여 최신의 상태를 사용하고 컴포넌트가 재 렌더링되었을 그 시점의 상태를 사용하지 않게 된다 컴포넌트가 재 렌더링되었을 때의 시점과 상태 변경이 예약되는 시점의 차이를 아는 것은 매우 중요하다 이렇게 함수를 호출한다고 이 바로 다음 행에서 상태가 갱신되는 것은 아니라고 이미 배웠다 상태는 이 위치에서 갱신되지 않고 갱신 예악이 된 뒤 컴포넌트가 다시 실행된다 이 경우에 컴포넌트가..

DOM에 컴포넌트가 연결되고 유지되는 동안에는 useState 상태는 최초의 초기화 이후에는 갱신만 된다 강의 대본 명백한 이야기지만 리액트에서 상태란 가장 중요한 개념입니다 이 상태라는 것은 컴포넌트를 다시 렌더링하고 화면에 표시되는 것들을 바꿉니다 따라서, 컴포넌트와 이 상태와의 상호작용은 리액트의 핵심적인 개념이죠 물론 이 둘 모두 리액트가 관리한다는 것에 주목할 필요가 있습니다 이러한 컴포넌트의 개념은 리액트 라이브러리에서 나왔으며 리액트는 이 컴포넌트와 연결된 상태도 함께 처리합니다 useState 후크를 이용하는 게 그 예입니다 이런 방식을 통해 컴포넌트와 상태간의 상호 작용을 처리합니다 말이 나와서 말인데 가장 일반적인 형태의 상태 관리는 useState 후크를 사용하는 것입니다 이를 이용하..

함수 안에 함수를 만들고 이 함수를 props를 통해 컴포넌트에 전달하면 새로운 함수 객체를 얻을 수 있다 하지만 이렇게 되면 React.memo를 통한 도움은 얻을 수 없다 객체는 참조값이고 React.memo가 내부적으로 실행하는 등호를 통한 비교는 원시값에 대해서는 통용되지 않기 때문이다 강의 대본 자, 이 강의를 시작하기 전에 지금까지 배운 것을 요약해보죠 모두 중요한 것이므로 명확히 이해해야 합니다 리액트 앱에서는 컴포넌트를 통해 작업을 수행합니다 최신 리액트에서는 주로 함수 컴포넌트와 함께 할 겁니다 이런 컴포넌트는, 결국 하나의 작업을 수행하는데 이들이 반환하는 JSX 코드입니다 이 것은 리액트에게, 컴포넌트의 출력이 무엇인지를 알려줍니다 이제 여러분의 리액트 컴포넌트에서는 상태와 props..

Javascript에서 "function is clouser" 라는 것을 떠올려보자 왜냐하면 우리가 useCallback을 통해 리액트에게 어떤 환경에서든 함수 재생성을 하지 않게 막았기 때문이다. 따라서, 리액트가 이 함수에 사용하기 위해 저장한 allowToggle의 값은 최신의 값이 아니고, App 컴포넌트가 처음 실행된 시점의 값을 저장하고 있다 헷갈리는 개념 강의를 한 번 더 들어봐야할 것 같다! Button callback 사용했는데 console 실행되는 문제 확인 다시 해보기 import React, { useState, useCallback } from 'react'; import DemoOutput from './components/Demo/DemoOutput'; import './Ap..

React.memo는 객체 외에 prop 값에도 작동하게끔 할 수 있다 객체를 생성하고 저장하는 방식만 조금 변경해주면 되는데 이 작업은, 리액트에서 제공하는 추가적인 훅을 통해 할 수 있는다. 이것이 useCallback 훅이다. useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 리액트에, 우리는 이 함수를 저장할 것이고 매번 실행때마다 이 함수를 재생성할 필요가 없다는 것을 알릴 수 있다 이렇게 되면, 동일한 함수 객체가 메모리의 동일한 위치에 저장되므로 이를 통해 비교 작업을 할 수 있다 useCallback 훅을 사용하고 함수를 첫 번째 인자로 전달하면 useCallback은 이 저장된 함수를 반환해준다 그리고, 이 App 함수가 다시 실행되면 u..

함수형 컴포넌트에만 가능한 기능 React.memo는 함수형 컴포넌트를 최적화할 수 있다 이 memo는 어떤 역할을 할까? React.memo는 인자로 들어간 이 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전달합니다 그리고 props의 값이 바뀐 경우에만 컴포넌트를 재실행 및 재평가하게 된다 리고 부모 컴포넌트가 변경되었지만 그 컴포넌트의 props 값이 바뀌지 않았다면 컴포넌트 실행은 건너뛴다 import React, { useState } from 'react'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css'; ..

태그 자체를 보이게 하는 것과 태그 안에서 문자열을 보이게 하는 것의 차이를 확인해본다. 문자열에 조건을 주었을 때는 단락 구문이 깜빡이게 되는데 텍스트의 추가와 삭제가 요소 안에서만 이루어지기 때문이다. 실제 변경은 DemoOutput에서 발생하지만 이에 대한 상태를 관리하고 있는 App 컴포넌트 역시 다시 실행된다는 것을 기억해두자 다시 언급하지만, 상태나 props, 또는 컨텍스트를 가지고 있고 이러한 것들이 변경되는 컴포넌트는 재실행, 재평가된다 부모 컴포넌트들이 변경되었고 자식 컴포넌트는 부모 컴포넌트의 일부분이기 때문에 부모 컴포넌트 함수가 재실행되면 마찬가지로 자식 컴포넌트 함수도 재실행된다. 따라서 props의 값은 여기서는 상관이 없이 부모 컴포넌트가 재실행될 경우 자식 컴포넌트도 다시 ..