react

useCallback useCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useMemo 에서 작성했던 Average 컴포넌트의 경우, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 이 방식의 경우 크게 문제는 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback 사용하기 const onChange = useCallback(e=>{ setNumber(e.target.value); },[]..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다. memoization을 잘 활용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo의 구조 const value = useMemo(()=>{ return calculate(); },[item]) useMemo는 useEffect처럼 첫 번째 인자로 함수인 calculate()를 호출하여 결과값을 반환한다. calculate 함수는 여기서 비용이 많이 드는 계..

useReducer 이전까지 상태를 업데이트 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데, 상태를 관리할 때 useState를 사용하는 것 말고도 다른 방법이 있다. 바로 useReducer을 사용하는 것인데, useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state,actio..

Hooks React Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능을 할 수 있게 해준다. 훅을 사용하면 클래스 컴포넌트보다 훨씬 더 간결하고 직관적인 코드를 작성할 수 있어, 프로젝트의 유지보수를 높일 수 있다. 지난번 글에서 다뤘던 useState도 React Hooks의 한 종류이며, 리액트의 가장 대표적인 Hook으로 useState와 useEffect를 꼽을 수 있다. 이외에도 useReducer, useMemo, useCallback, useRef등 다양한 훅이 있으며 오늘은 useEffect에 대해 다..

State란? State란 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const, let 등으로 선언한 변수와 다르게 State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 변경된 부분을 재렌더링하여 화면을 바꾼다. props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, State는 하위 컴포넌트도 데이터를 변경할 수 있다. 함수형 컴포넌트는 'useState'라는 React Hook을 사용하여 State를 다룰 수 있다. useState 사용하기 1. 파일 위쪽에 useState를 import 해준다. import { useState } from "react"; 2. useState 구문을 사용한다. const [state,setState]=useState(초기값); s..

Routing 라우팅이란, URL에 따라 그에 상응하는 화면을 전송해주는 것을 말한다. 쉽게 말해, 링크를 입력하면 그 링크로 이동시켜주는 역할을 한다. 라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시에 서버에서 모든 컨텐츠를 불러오는 것이 아닌 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다. 리액트에서는 라우팅 기능을 사용하기 위해 react-router 라이브러리를 따로 설치해줘야 한다. SPA(Single Page Application)이란? SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미한다. 사용..

1. Components 리액트는 컴포넌트로 구성된다. 컴포넌트는 UI를 작은 조각으로 나눈 것으로, 이러한 컴포넌트들을 조합하여 전체 애플리케이션을 구성한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 개념적으로는 자바스크립트 함수와 유사하지만 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트와는 차이점이 있다. 리액트에서의 입력은 Props, 출력은 React element가 된다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다. 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 함수로 props 객체 인..