2년 전 · 익명 님의 질문 업데이트
React에서 Custom hook 사용법에 관하여 질문있습니다.
react custom hook이란 로직의 재사용성을 위하여 로직들을 묶어놓는 용도로 사용한다고 배웠는데 종종 custom hook에서 component까지 render하는 함수를 제공하는 케이스들을 본것같아 궁금한것이 있습니다. 질문이 두가지 있습니다. 1. Custom hook에서 component 렌더링해주는 함수까지 제공하는 것이 custom hook의 용도에 알맞은 것일까요? 관련된 component를 제공해주는 것까지 재사용할 로직에 포함된다고 생각하면 되는걸까요? 2. 두번째는 react 렌더링에 관련된 질문입니다. custom hook에서 export default const useComponent = () => { const [value, setValue] = useState(''); const InputComponentByCustomHook = () => { return (<input value={value} onChange={(e)=>setValue(e.target.value)} />); } return [InputComponentByCustomHook ]; } 로 선언해준 후, 이를 app에서 사용하는 경우에 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> <InputComponentByCustomHook /> </>) } 이 경우에는 자꾸 input에 값을 입력할때 한글자 한글자마다 focus가 풀리길래 왜 그런가에 대해서 알아보니 value값이 변경될때마다 InputComponentByCustomHook컴포넌트가 계속 새롭게 만들어져서 focus가 풀린다고 하더라구요. 그런데 아래와 같이 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> { InputComponentByCustomHook() } </>) } 함수를 실행하여 return으로 컴포넌트를 전달해주는 경우에는 input에 값을 입력해도 focus가 풀리지않습니다. value 값이 변경될때마다 InputComponentByCustomHook 함수는 계속해서 재생성되는 것은 알겠는데 앞선 케이스와 달리 이친구는 계속 input 컴포넌트가 유지되는 이유가 무엇일까요? 함수가 재생성되더라도 return에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?
개발자
#react
#custom-hook
답변 0
댓글 0
추천해요 2
조회 102
2년 전 · 손호영 님의 질문
current_datetime 열에 시간이 출력이 안되요!
insert into 5_days(name, current_datetime) select '팀회의',convert_tz(now(), 'utc', 'Asia/Seoul')-- 현재 시간 및 날짜를 출력 union all select name, case when weekday(now()) between 0 and 4 then convert_tz(now(),'utc','Asia/Seoul')-- 월요일부터 금요일까지를 시스템 시간으로 변환합니다. else convert_tz(now(),'utc','Asia/Seoul') end from 5_days; 문제가 있나요?
개발자
#mysql
답변 0
댓글 0
조회 28
2년 전 · 손호영 님의 질문
mysql에서 자꾸 에러가 떠요
insert into 5_days(name, current_datetime) select '팀회의',convert_tz(now(), 'utc', 'Asia/Seoul')-- 현재 시간 및 날짜를 출력 union all select name, case when weekday(now()) between 0 and 4 then '월요일 부터 금요일까지'-- 월요일부터 금요일까지를 시스템 시간으로 변환합니다. else '주말' end, convert_tz(now(),'utc','Asia/Seoul') from 5_days; 모르겠어요
개발자
#mysql
답변 0
댓글 0
조회 37
2년 전 · 김현진 님의 답변 업데이트
onChange 함수 관련하여
<template v-for="(item, i) in checkListItem" :key="i"> <label for="camera"> <form> <input type="file" id="camera" accept="image/*" style="display: none" @change="e => handleFileInputChange(e, i, item)" /> </form> </label> </template> <script lang=“ts” setup> const handleFileInputChange = (e, i, item) => { console.log(checkListItem.value) //콘솔1 console.log(item) //콘솔2 console.log(i) //콘솔3 const files = e.target.files[0] const reader = new FileReader() reader.onload = e => { /* 수정필요 */ item[i].check_file = e.target.result item[i].checked = true } reader.readAsDataURL(files) } <script> //콘솔1 checkListItem = [ {checkId: 11, content: ‘체크리스트1’}, {checkId: 12, content: ‘체크리스트2’}, {checkId: 13, content: ‘체크리스트3’}, {checkId: 14, content: ‘체크리스트4’}, {checkId: 15, content: ‘체크리스트5’} ] handleFileInputChange 함수 실행 시 선택한 checkListItem의 item과 index값을 가져와 선택한 item에 파일 첨부하고싶은데.. 현재는 체크리스트4번에 파일을 첨부하면 체크리스트1에 값이 들어옵니다. 콘솔 찍어보면 무조건 첫번째 객체값 부터 찍힙니다. //콘솔2 는 {checkId: 11, content: ‘체크리스트1’}, //콘솔3은 0 이 찍힙니다.
개발자
#onchange
#javascript
#vue3
답변 2
댓글 0
조회 79
2년 전 · 커리어리 AI 봇 님의 새로운 답변
<input type="file" multiple> 관련하여..
<template> <div> <input ref="fileInput" type="file" accept="image/*" multiple="true" @change="handleFileInputChange" /> <button @click="openFileInput" class="select-button"> Select Images </button> <div class="preview-container"> <div v-for="file in selectedFiles" :key="file.lastModified" class="preview-item" > <p>{{ file.name }}</p> <div class="preview"> <img :src="previewImage" style="width: 100px" /> </div> <!-- <img :src="URL.createObjectURL(file)" /> --> <button @click="removeFile(file.lastModified)" class="remove-button"> X </button> </div> </div> </div> </template> <script setup lang=“ts”> const fileInput = ref() const selectedFiles: Ref<Array<any>> = ref([]) const openFileInput = () => { fileInput.value.click() } const previewImage = ref<any>('') const handleFileInputChange = e => { // const files = Array.from(fileInput.value.files) const files = e.target.files console.log('files', files) selectedFiles.value.push(...files) console.log('add selectedFiles', selectedFiles.value) for (let i = 0; i < selectedFiles.value.length; i++) { const file = selectedFiles.value[i] console.log('handleFileInputChange_ file', selectedFiles.value[i]) const reader = new FileReader() reader.onload = e => { previewImage.value = e.target.result } reader.readAsDataURL(file) } } const removeFile = lastModified => { selectedFiles.value = selectedFiles.value.filter( file => file.lastModified !== lastModified ) console.log('remove selectedFiles', selectedFiles.value) } </script> 모바일에서 카메라로 찍은 여러장의 사진들이 각각의 썸네일로 노출되어야함 현재는 최신 사진으로 엎어치기 됨.. 예) 'A B C D' 의 사진이 나와야하는데 현재는 A 찍고 B찍으면 'B B' 가 됨 C찍으면 'C C C'가 됨 도와주세요!
개발자
#input
#type='file'
#vue3
#multiple
#preview
답변 3
댓글 0
보충이 필요해요 1
조회 174
2년 전 · Jihyeon 님의 새로운 댓글
2038년 1월 19일이되면 UTC 기반 프로그램들은 어떻게되나요?
친구랑 얘기하다가 나온 뜬금없는 주제인데요. 기존 32-bit int를 사용해서 UTC를 계산하던 프로그램들은 2038년 1월 19일 03:14:08 UTC epoch가 마지막이잖아요? 이때가 되면 그 프로그램들은 어떻게 되는건가요? 버그가 우수수 나오게되나요?
개발자
#utc
답변 3
댓글 1
조회 116