차근차근 배움터

함수 안에 함수를 만들고 이 함수를 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의 값은 여기서는 상관이 없이 부모 컴포넌트가 재실행될 경우 자식 컴포넌트도 다시 ..

리액트는 상태나 props, 컨텍스트 변경시에만 함수를 재실행하고 재평가한다고 했죠? 먼저, 항상 말하듯 상태 변경이나 props 변경, 또는 컨텍스트 변경은 컴포넌트 함수를 다시 실행시킨다고 했다 간단하게 버튼을 만들어서 클릭하면 태그 내용이 출력되고 다시 클릭하면 사라지는 토글 버튼을 만들었다 그 과정에서 전체 DOM이 재실행되는 것이 아닌 업데이트가 일어난 부분만 실행된 것을 확인할 수 있다. 즉 실제 DOM을 통한 업데이트는 가상 스냅샷 간의 차이점만 반영되었다

먼저 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다 리액트의 핵심은 "컴포넌트"이다 리액트는 웹을 모른다. 브라우저와는 전혀 관계가 없고 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만, 이러한 컴포넌트에 HTML 요소들이 포함되어 있는지 아니면 아예 허구적인 요소들이 있는지에 대해서는 상관할 것이 아니다 이는 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 것들이다 리액트는 컴포넌트를 관리하고 상태 객체를 관리하고 또한 다른 객체의 상태와 컴포넌트가 바뀌어야 하는지를 확인하고 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리일 뿐이다 그리고, 리액트는 변경된 내용과 어떤 화면이든간에 화면에 표시되어야 할 정보 모두를 현재 사용중인 인터페이스에 전달한다. 예를 들어 ..

섹션 12: 리액트와 최적화 테크닉 살펴보기(A Look Behind The Scenes Of React & Optimization Techniques)

로컬 저장소에 접근과 같은 기능이 없었기 때문에 여태까지 useEffect를 사용하지 않았는데 버튼을 클릭할 때마다 bump 애니메이션 효과를 주도록 하는 것에 useEffect 훅을 사용할 것이다 버튼을 클릭하면 bump class가 추가되도록 하고 또 타이머를 설정해 그 class가 사라지도록 할 것이다 이제 클린업 함수도 추가하고 싶은데요 타이머를 지우도록요 해당 컴포넌트를 삭제해야 하는 경우에요 하지만 그건 이 애플리케이션에서는 일어날 수 없는 일입니다 버튼은 항상 있어야 하니까요 하지만 그렇더라도 타이머 또는 실행 중일 수도 있는 기타 사이드이펙트는, 정리하는 것이 좋은 습관입니다 왜냐하면 useEffect에서 시작했으니까요 따라서 여기서 클린업 함수를 반환하겠습니다 useEffect에서 함수를..

약간 코드 따라치기를 하게 된 것 같기는 한데 .. 중간 중간 생긴 에러들 잘 수정했다 action id 대신 item을 비교해야 하는 경우들이 꽤 있었다. Cart.js import React, { useContext } from 'react'; import styles from './Cart.module.css'; import Modal from '../UI/Modal'; import CartContext from '../../store/cart-context'; import CartItem from './CartItem'; const Cart = props => { const cartCtx = useContext(CartContext); const totalAmount = `$${cartCtx.to..