useRef
-
[React] 자식 컴포넌트 제어 - forwardRef, useImperativeHandleFront-End(Web)/React - 프레임워크(React, Next) 2022. 9. 15. 04:37
사이드 프로젝트에서 Uncontrolled Input을 구현하기 위해 고민하던 중, 문득 자식(input)의 ref.current.value를 부모(container component)가 어떻게 참조할 수 있을까에 대한 의문이 생겼다. * ref, useRef() 포스팅 : https://abangpa1ace.tistory.com/248 [React] Hooks - useRef() 회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 abangpa1ace.tistory.com 가장 심플하게, 자식인 React 노드에 ref를 줘보았고, 아래와 같은 에러 메세지를 띄워..
-
[React] Hooks - useRef()Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21
회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..