React

실제 DOM에 접근하여 조작하는 대신,이를 추상화한 자바스크립트 객체를 구성하여 사용 JavaScript를 이용해 DOM을 직접 조작하면, 변경 사항이 있을 때마다 리렌더링을 함매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지게 됨 (비용이 크다)실제 D

React 는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너컴포넌트마다 state 를 설정하고, 각각의 방식대로 setState 를 했을때, state를 사용하는 곳이 너무 많아서 오류를 찾기 어렵기 때문프로젝트의 규모가 커진다면 App의 코드가 길어지고 유지 보수하

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.컴포넌트에 prop을 설정하여 background-color: ${(prop

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리→ 서버 상태 관리 라이브러리cache 활용비동기 과정을 선언적으로 관리할 수 있다동일한 데이터를 여러번 요청하면 한번만 요청한다Redux Thun

커스텀 훅 반복되는 로직이 자주 발생할 때 커스텀훅을 만들어서 반복되는 로직을 최소화하고, 쉽게 재사용하기 위해 제작 훅 쓰기 전 커스텀 훅 사용

리덕스 툴킷 효율적인 Redux 개발을 위한 도구모음 사용 이유 기존 리덕스 단점 저장소를 설정하는 것이 너무 복잡함 쓸만하게 되려면 너무 많은 패키지들을 더 설치해야함 보일러플레이트 코드를 너무 많이 필요로 함 => 코드를 더 좋고 유지보수하기 쉽게 만들기 위해 사용 코드 리덕스 리덕스 툴킷 위와 같이 툴킷이 훨씬 짧고 간결하여 좀 더 유지보수가 ...

useInputs 커스텀훅(useReducer사용) useReducer action(액션)만 추가하고 dispatch함수만 자식 컴포넌트에 전달하면 되기 때문에 useState보다 확장성이 높으며 상태관리도 용이함

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook의존성 배열에 빈 배열을 넣으면 마운트 시에만 실행됨의존성 배열에 조건을 넣으면 조건이 업데이트 되면 실행됨빈 배열특정 조건의존성 배열에 빈 배열을 넣으면 언마운트가 될때 실행됨의존성 배열에 조건을 넣

memoization를 하기 위한 React의 방법들메모(기억)을 한다. 캐시 같은 곳에 저장해서 그때그때 찾아서 쓴다.불필요한 렌더링이 발생하지 않도록 하기 위해 사용한다.React.memo, useCallback, usememo(값을 기억 : 객체나 배열이나 함수가

웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크개발 환경 설정이 쉽고 간단하다.SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.초기 로딩 속도 개선을 위한 자동 code spli