ttaeng_99 's 개발의 흔적들 ttaeng_99 's 개발의 흔적들

REF

• [React] 자식 컴포넌트 제어 - forwardRef, useImperativeHandle

  Front-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를 줘보았고, 아래와 같은 에러 메세지를 띄워..

  Read More
• [React] Hooks - useRef()

  Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21

  회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..

  Read More
• [Vue] Composition API

  Front-End(Web)/Vue 2022. 3. 12. 05:44

  이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..

  Read More