Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다 Redux 사용시 문제점 저장소 구성의 복잡성 많은 패키지 필요성(의존성) 한 작업 시 필요한 수 많은 코드양(boilerplate)=>보일러플레이트 보일러플레이트란? 컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. //리덕스 설치 npm install @reduxjs/toolkit 리덕스 툴킷 api configureStore() : 리덕스 createStore함수와 비슷한 함수로, 간단화된 구성 옵션과, 기본 구성을 제공한다. slice reducer를 자동으로 합치고, 미들웨..

Fragment 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다( 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문) => fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. const Table= ()=> { return ( ); } const Columns { return ( hi bye ); } Table 컴포넌트가 유효하려면 가 여러 엘리먼트를 반환해야 하는데 가 를 로 감싸서 반환한다면 실제 dom tree는 아래와 같이 구성된다 hi bye =>이렇게 구성된 html은 유효하지 않다. Fragment 사용예시 const ..

Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다 상태관리 로직의 재활용이 가능한 경우 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있는 경우 FriendStatus 컴포넌트는 사용자들이 온라인인지 오프라인인지 확인하고, FriendListItem 컴포넌트는 사용자들의 상태에 따라 온라인이라면 초록색으로 표시하는 컴포넌트가 있다 이 두 컴포넌트는 정확하게 똑같이 쓰이는 로직이 존재한다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { const [isOnline, setIsOnline] = useState(nul..

useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능 하다 useMemo 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. (특정 value를 재사용) /* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ /*value 를 인자로 받는 Calculator 컴포넌트*/ import { useMemo } from "react"; function Calculator({value}){ const result = useMemo(() => calculate(value), [value]); return {result} ; } value 는 일종의 값으로서, 이 값이 계속 바..