React

React 또는 Vue와 같은 SPA 프레임워크/라이브러리를 사용하다보면항상 "상태 관리"에 대해 신경써야하는 경우가 발생한다.컴포넌트는 props를 사용해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다.만약 트리구조를 갖는 컴포넌트에서 다른 분기에 있는

이번에는 동적 Context를 사용하는 방법에 대해서 알아본다!이전에 만들었던 ColorContext 컴포넌트를 수정한다.기존에는 ColorContext를 사용해서 Provider 컴포넌트를 직접 사용하는 방식이었다면 이번에는 ColorProvider라는 컴포넌트를 만

React를 공부하면서 상태는 컴포넌트에서 가장 중요한 요소다.컴포넌트의 변할 수 있는 값을 만들기 위해서 클래스형 컴포넌트에서는this.state를 활용하기도 하지만 가장 많이 사용하는 방법은함수형 컴포넌트에서 useState hook을 사용하는 방법일 것이다.use

리액트 hooks를 공부할 때 가장 많이 사용되는 훅은 아마도 useState일 것이고 그 다음 가장 많이 사용되는 훅은 useEffect일 것이다.클래스형 컴포넌트와 달리 함수형 컴포넌트에서는 리액트 생명주기 함수를 사용할 수 없으므로 이를 대체하기 위해서 useEf

useRef는 크게 두 가지 경우에 사용할 수 있는 것으로 알고 있다.컴포넌트 내부에서 변수를 사용하고 싶을 때, DOM 요소에 접근할 때간단하게 이렇게만 알고 있었고 직접적으로 사용해 본적은 없었지만좀 더 자세하게 알아보고 어떤 상황에서 useRef가 필요하고 어떤

useMemo를 알기전에 memoization에 대해서 간단하게 알아본다.나무위키에서는 메모이제이션에 대해서 이렇게 설명하고 있다.컴퓨터 프로그래밍 용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할

useCallback 또한 useMemo와 같이 Memoization을 사용해서 리액트 컴포넌트 성능 최적화를 만든다는 점은 동일하다.단 useMemo와 달리 인자로 넘겨주는 콜백 함수 그 자체를 Memoization 한다는 점이 다르다.자바스크립트에서 함수는 객체다.

React에서 제공하는 React.memo는 HOC, 고차 컴포넌트다. 고차 컴포넌트란, 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해주는 함수다.리액트에서 컴포넌트는 Props, 또는 State에 의해서 자주 렌더링된다. 컴포넌트가 복잡한 로직을 포함하고 있