코딩하는라민

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..

[React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌 ramincoding.tistory.com Mount Update Unmount ComponentDidMount ComponentDidUPdate ComponentWillUnmount 컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드 컴포넌트가 변화하는 순간에 사용할 수 있는 메서드 컴포넌트가 화면에서 사라지기..

[React] Hooks - useState ( ) 📌 useState 함수형 컴포넌트에서는 '상태' 를 관리할 수 없었다. 하지만 React 16.8 에서 Hooks 가 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다! '상태' 란 무엇일까? 상태는 컴포넌트에서 동적인 값을 말한다. 함수형 컴포넌트에서는 변하는 상태의 개별적인 업데이트가 요구된다. 클래스형 컴포넌트에서는 데이터를 교체하고 하나로 합친다. ✅ useState React 16.8부터 사용할 수 있게 된 Hooks 중의 하나인 useState 는 컴포넌트의 상태를 관리할 수 있다. useState()는 state와 state를 업데이트 하는 함수를 쌍으로 제공한다. const [state, setState] = useSta..