민하수

- 컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다. - 미들웨어를 활용한 다양한 기능 추가 : 강력한 미들웨어 라이브러리(ex. redux-saga) : 미들웨어에서 로컬 스토리지에 데이터 저장하기 및 불러오기 - SSG(서버 사이드 렌더링) 시 데이터 전달이 간편 : 리덕스의 상태값은 하나의 객체로 표현이 가능 -> 그 하나의 객체만 문자열로 변환해서 서버에서 클라이언트로 전달하면 되기 때문에 매우 간편 - 클라이언트는 받은 문자열을 하나의 객체로 만들어서 사용하면 됨 : 하나의 객체로 관리 가능하기 때문에 클라이언트에서 전체 애플리케이션의 상태를 저장해서 불러오는 기능도 간단하게 구현 가능 과거의 상태를 저장했다가 과거의 상태로 돌아가는 것도 가능 - 리액트 콘텍스트보다 효율적인 렌더링 가능 ..

상태 ‘UI에 동적으로 표현될 데이터(변하는 데이터)’ Side Effect 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청(백엔드 API 요청) 상태의 두 가지 구분 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터 input box, select box 등과 같이 입력값을 받는 경우 전역 상태 : 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태 데이터 로딩 여부(로딩 중) 상태 역시, 앱 전반에 영향을 미침 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 함 '하나의 출처'는 '전역 공간'이라고 할 수 있..

리액트 훅(Hook) 컴포넌트에 기능을 추가할 때 사용하는 함수 (컴포넌트에 상태 값 추가, 자식 요소에 접근 등) 훅 사용 시 꼭 지켜야 할 규칙 1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다. 2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다. ref는 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다 DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 Scroll 위치 조작하기 애니메이션 적용 setTimeout, setInterval을 통해서 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 Canvas 요소에 그림 그리기 등 useRef Hook 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 준다! DOM 노드, 엘리먼트, R..