[React]

React Virtual DOM : 브라우저에 실제로 보여지는 DOM이 아니라 메모리 상에만 존재하는 가상의 DOM으로, 그냥 자바스크립트 객체이기 때문에 작동 속도가 실제 DOM보다 훨씬 빠르다. 리액트는 상태(state)가 업데이트 되면 Virtual DOM에 먼

useReducer useState처럼 state 생성, 관리를 할 수 있도록 도와준다. state가 많고 복잡할 때 useReducer를 사용하면 코드를 깔끔하게 사용할 수 있고 유지보수에도 도움이 된다. > #### useReducer의 핵심 3가지 reducer

UseMemo useMemo에서 메모(Memo)는 memoization을 의미한다. memoization이란 기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 적절히 사용하면 중복 연산을 피할

useCallback useCallback은 함수 자체를 메모이제이션(memoization) 해준다. useMemo가 함수의 리턴값을 메모이제이션한다면, useCallback은 함수를 기억해둔다. useCallback은 첫번째 인자로 메모이제이션할 콜백 함수, 두번째

useRef 함수형 컴포넌트에서 useRef를 호출하면 ref 오브젝트를 반환해준다. 변수명.current로 접근하여 초기값을 변경할 수 있다 반환된 ref는 렌더링 여부와 관계없이 값을 그대로 유지할 수 있다. (unmount 되기 전까지) useRef는 언제

리액트로 만든 앱은 여러 개의 컴포넌트로 이루어져 있다. 이 컴포넌트는 최상위 App 컴포넌트로 시작해서 트리 형태로 뻗어나간다.props를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트로 단계별로 전달하게 되는데,이 때 React Context를 활용하면 리액트 앱에서

리액트 최적화를 위해서는 렌더링되는 부분을 제대로 이해해야 한다. class 함수는 render 부분이 리렌더링되고, 함수 컴포넌트는 전체가 리렌더링이 된다. 아래 예제에서 버튼을 클릭했을 때 변하는 state는 없어도 class는 리렌더링이 된다. 리액트는 Props와 State를 변경하게 되면 보통 리렌더링이 일어난다. 바꾸는 State가 없어도 s...

메모이제이션(Memoization) 컴퓨터 프로그램이 동일한 계산을 반복적으로 해야할 때, 이전에 계산한 값을 메모리에 저장하여 중복 계산을 제거함으로써 전체적인 실행 속도를 빠르게 해주는 기법 React.memo React.memo는 고차 컴포넌트(Higher Or

Refs 리액트의 Ref는 references의 줄임말로, 리액트 컴포넌트에서 DOM 노드를 직접적으로 참조하고 상호작용할 수 있게 해준다. 예를 들어 Input 박스에 포커스를 맞추는 기능 같은 것이 가장 대표적인 활용 방법이다. 특히 Ref가 컴포넌트 내에서 특정

useNavigate() useNavigate()는 리액트 라우터에서 페이지를 이동할 때 사용된다. 개발을 하다 보면 페이지를 이동할 때 특정 값을 이동하는 페이지에 전달해야 하는 경우가 생기는데, 이때 navigate() 함수를 사용하면 원하는 값을 전달할 수 있다

앱을 다시 실행할 때, 토큰이 있으면 자동 로그인이 되도록 코드를 구현하는 과정에서 useEffect 내에서는 async/await 구문을 사용하지 못 한다는 것을 알게 되었다. 따라서 아래와 같은 코드는 사용할 수 없다. useEffect 내에서 async/a

1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처는 웹 애플리케이션의 복잡한 UI를 재사용 가능한 단위로 분할하는 방식을 말한다. 컴포넌트는 자체적으로 상태와 속성을 가지고 있으며, 독립적으로 작동한다. 각 컴포넌트는 특정 기능이나 UI의 한 부분을 책임진다.컴포넌