useRef

단순한 SelectBox 만들기 ~  요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업의 열림/닫힘을 표시하는 아이콘 구현할 동작SelectorBox를 누르면 OptionListBox가 열린다.OptionListBox에서 특정 OptionItem을 선택하면 OptionListBox가 닫히면서 SelectorBox에 선택한 값을 표시한다. (상위 데이터 변경)OptionListBox의 상태에 따라 CaretIcon을 바꿔준다.외부 영역을 클릭했을 시에도 OptionListBox를 닫아준다.마우스 hover 상태의 OptionItem은 밝은 색상..

useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook useRef – ReactThe library for web and native user interfacesko.react.dev useRef는 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환한다.ref를 사용하면 다음을 보장한다.(렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있다.(리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않는다. 그렇기 때문에 화면에 표시되는 정보는 state를 사용하는 것이 적합하다.(정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장된다.ref를 사용하여 DOM을 조작하는 것은 특히 일반..