React.memo는 useMemo Callback과 동일한 개념인데, 이제 Hook이 아니라 Component를 감싸는 API다. React.memo를 사용하면 감싸고 있는 Component의 Props가 바뀌면 다시 Rendering 하지 않는다. 사용방법은 매우 간단하다. MemoComponent.tsx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React from "react" interface IMemoComponentProps { message: string } function MemoComponent({message}: IMemoComponentProps) { console.log("Memo Component!") return ( {message}..

Hook ? React.js 의 Hook은 React.js 16.8에서 나온 기능이다. Hook을 이용하여 기존 Class 바탕의 코드로 작성할 필요 없이 상태값과 여러 기능을 사용할 수 있다. (즉, Class Component 에서 사용되던 Lifecycle, 여러 기능들을 Functional Componet에서도 사용할 수 있다.) 1. useState - 간단하게 말하면 상태에 대해 저장을 하고, 관리를 할 수 있게 해주는 Hook이다. 사용시에 아래와 같이 사용되면 상태를 불러올 수도, 변경할 수도 있다. 다만 유의할 점은 setState(); 를 통해 값을 변경했을 때 바로 반영되는 것이 아니라, Component가 Rerendering 되면서 값이 다시 주입되는 것 뿐이다. ([React.j..

Redux는 React.js 외에도 사용할 수 있는 상태관리 Library지만, 본 글은 React를 이용해 작성될 예정이다. Redux란? 상태 관리를 진행해주는 Javascript Library이다. React의 관심사를 분리해줄 수 있다. 상태 관리를 해야하는 이유? React.js에서 상태(state)는 Component 단위로 관리를 진행하고 있다. 때문에 상위 Component에서 하위 Component로 이 상태를 내려주기 위해서는 Props를 이용해서 내려줘야 한다. 근데 만약 아래와 같이 Component가 관리되고 있고, Main Component에서 상태를 관리하고 있으며, 이 상태를 MyInfo까지 내려주려면 총 몇번을 내려야하는가? [ Root Component ] > [ Main..

React의 장점 하면 무엇이 생각나는가? 내 생각으로는 React는 Virtual DOM을 이용해 초기 렌더링 되었을 때 DOM을 저장해놓고, 이 후 특정 값이 변경되었을 때 Virtual DOM에 적용 후 Virtual DOM에 있는 Render Tree를 Real DOM에 적용하여 Browser Rendering 연산 비용을 줄여주는 것이 제일 먼저 생각나지 않을까 싶다. (사실 이 부분에 대해서는 제대로 이해한게 맞나? 라는 생각이 든다. Browser Redering 과정을 알고 있다면 어느정도 이해가 가는 부분이지만, 설명을 하기란 어려운 것 같다. 나중에 Browser Rendering 과정에 대해서도 따로 작성하도록 한다.) 그렇다면 특정 값이 변경되었을 때 Re rendering이 된다는..

2021.01월 쯔음에 처음 사용해본 React 에서 원래는 Class Component를 사용했었다. (책에서도 Class Component가 예시로 나와있고.. 그 당시 Functional Component에 익숙하지 않아 Class Component를 채택했었다.) 근데 최근 내용을 보니, Class Component는 사실상 React에서 버려진 Component라고 하는 것을 봤다. 그 얘기를 듣고 "아니 대체 왜?, Class Component와 Funcational Component는 사용하는 방법만 다를 뿐이지 동작하는 내용은 사실 똑같지 않나?, 뭐가 더 편하고 뭐가 더 장점이 있길래?" 라는 생각으로 이번에는 Functional Component를 사용해보았다. 그랬더니 결론만 말하자면..