민하수

상태 ‘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..