react.memo란? memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다. - react 공식문서 일반적으로 부모 컴포넌트가 리랜더링 되면 자식 컴포넌트도 리랜더링 된다. props 받든 안받든, props가 변경이 되든 안되든... 하지만 state가 변경되지도 않았는데, 리랜더링이 되면 성능적으로 낭비이기 때문에 컴포넌트의 props가 변경 되지 않은 경우에는 리랜더링을 하지 않도록 memoize한다. 이때 사용 할 수 있는게 react.memo이다. ※ memoize란? props와 동일하다면 부모가 리렌더링될 때 새로운 props가 이전 props와 동일하면 리렌더링 되지 않는 컴포넌트를 만들 수 있습니다. 이러한 컴포넌트를 memoized 상태라고 합니..

useReducer 훅이란? useReducer useReducer는 컴포넌트에 reducer를 추가하는 React Hook입니다. -- react 공식문서 어렵게 생각하지 않아도 된다. 그냥 useState와 같이 컴포넌트의 상태를 관리하기 위한 react의 훅인데, useState와는 달리 컴포넌트 내부에서가 아닌 외부에서도 컴포넌트의 상태를 관리 할 수 있도록 도와주는 훅이다.. useReducer를 사용하면 컴포넌트 외부에서도 상태 관리 코드를 작성할 수 있게 되기 때문에 복잡한 상태관리 로직을 모듈로 빼서, 컴포넌트 코드의 가독성을 높일 수 있다... 컴포넌트라는게 UI랜더링을 하기 위해 사용하고 이 랜더링을 위해 필요한 게 컴포넌트의 상태관리이다. 근데, state가 점점 많아지고, 로직이 복..

useEffect 학습전, 리액트의 라이프사이클에 대한 이해 리액트에서의 라이프 사이클은 크게 3단계로 나뉜다. 탄생 => 변화 => 죽음 이런 느낌인데.. 그래서 제어도 크게보면 저 3단계로 이루어진다. (물론 라이프사이클 조금 더 들어가면 많다.. 그건 다음에 라이프사이클 공부하면서 정리해야지...) useEffect 훅을 이용하면 리액트의 라이프사이클 중 개발자가 원하는 시점을 잡아서 원하는 로직을 콜백함수에 담아 호출 할 수 있다. useEffect 훅이란? useEffect란 컴포넌트의 사이드 이펙트를 제어하기 위해서 16.8버전에 추가 된 훅 중 하나로, 여기서의 사이드 이펙트란 부정적인 효과가 아닌, 컴포넌트의 변화에 따라 생기는 여러 효과를 의미한다. 결국 useEffect는 컴포넌트의 동..

리액트에서 Hooks란? Hook(이하 훅)이란 함수형 컴포넌트에서 상태(state)와 생명주기(life cycle) 기능을 사용할 수 있게 해주는 리액트에서 제공하는 기능이다. 훅은 함수형 컴포넌트 내에서만 사용할 수 있으며, 훅의 등장으로 리액트의 생태환경에서 함수형 컴포넌트가 클래스 컴포넌트를 대신하게 되었다. Hooks의 탄생배경 지금의 리액트 개발은 대부분이 함수형(Funtion) 컴포넌트를 이용해서 개발하고 있지만 기존의 리액트(16.8v 이전)는 지금과 다르게 클래스형(Class) 컴포넌트로 개발되어 왔다. 그 이유로는 state와 생명주기 API를 제공하는 클래스형 컴포넌트와는 다르게 기존 함수형 컴포넌트는 단순히 UI를 랜더링해 화면에 표출해주는 용도로만 사용할 수 있었다. 하지만 클래스..

useRef 훅이란? jsx로 작성 된 DOM이나 엘리먼트에 직접적으로 접근하기 위해 리액트에서 제공하는 훅 중 하나 javascript의 querySelector나 getElementById와 같은 기능을 제공한다. 일반적인 React의 데이터 플로우에서 props 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다. -- react 공식문서 useRef 사용방법 샘플코드..

리액트에서 컴포넌트가 리랜더링되는 경우 리액트에서 컴포넌트가 리랜더링 되는 경우는 크게 3가지 경우이다. 1. 컴포넌트 자신의 state가 변경되는 경우 2. 부모 컴포넌트로부터 받은 props가 변경되는 경우 3. 부모 컴포넌트가 변경되는 경우 따로 길게 설명하지 않고 샘플코드를 보면서 설명을 하도록 하겠다.. 1. 컴포넌트 자신의 state가 변경되는 경우 import { React, useState } from "react"; export const Render = (props) => { const [count, setCount] = useState(0); const plusButton = () => { setCount(count + 1); }; return ( 카운트 : {count} 증가버튼 )..