#usestate

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

서로 다른 front end 합치기

Vue로 작성된 a 라는 페이지에서 일부를 React로 작성된 b 라는 페이지를 보여주려면 어떻게 해야 되나요? gpt 물어보니 아래처럼 알려주던데 usestate나 그런 javascript가 잘 실행 안될까봐 걱정이네요

안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

변수와 state에 대해 질문있습니다.

자바스크립트와 리액트를 현재 공부하고 있는 중인데 변수인 let, const에 대한 부분과 리액트에서 useState에 대한 부분의 설명을 듣고 문법적인 부분은 이해는 했는 상황인데 제가 직접 혼자 코드를 작성을 해보려고 하니 변수와 useState를 어떨때 작성을 하면 되는지 감이 잘 오지 않더라구요. 그래서 혼자 코드를 작성을 할 때 이럴때 변수 또는 useState를 작성하면 되겠구나하고 정말 쉽게 이해할 수 있는 방법이 있을까요? 있다면 쉽게 설명해주시면 너무 감사드리겠습니다.

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

리액트 리랜더링 질문

안녕하세요! 제가 개발중에 문제가 생겼는데 혹시 아시는분이 계시면 답변해주시면 정말 감사하겠습니다. 저는 녹음기능을 구현하고 있습니다. A(부모) 컴포넌트에서 상태를 정의하였고 const [mice, setMice] = useState(false) 자식컴포넌트인 A_1, A_2 에게 props로 상태를 넘겨줍니다. A_2에는 시작과 중지 버튼이 있는 컴포넌트 이고 시작버튼을 누르면 setMice를 true로 증지 버튼을 누르면 setMice를 false로 만드는 역할을합니다. A_1은 props로 전달받은 mice에 따라 mice가 true면 녹음내용을 화면에 뿌리고, mice가 false면 녹음을 중지합니다 문제는.. A_2에서 녹음 중지를 누르게 되면 mice가 false가 되고 A_1이 리랜더링 되면서 기존의 커서위치를 초기화 시키는 문제가 있습니다. 이걸 어떻게 해결해야할까요? 글을 좀 못쓴거같은데 읽느라 고생하셨습니다 ㅠㅠ

react에서 복잡한 상태를 관리할때.. 한번에 관리? 분리해서 관리? (jotai, recoil, useState)

안녕하세요 react를 이용해서 복잡한 작성 페이지를 만들고있습니다. 아래의 타입은 예시입니다. type payload = { name: string; message: string; type: string; url: { pc: string; mobile: string; }; contents: { images: { url: string; name: string; }[]; buttons: { name: string; url: string; }[]; }; conditions: { ... }, .... }; 위처럼 복잡한 데이터를 서버로 보내줘야해서 데이터를 관리해야하는데 현재는 페이지내에 구조가 복잡하고 컴포넌트도 매우많아 props drilling이 너무 심해질거같아서 recoil, jotai와 같은 상태관리 라이브러리를 이용해서 작업을 진행하고있습니다. 이러한 상황에서 관리하는 데이터를 한객체에 모아서 관리하는게 좋은지 아니면 const nameAtom = atom(''); const messageAtom = atom(''); const typeAtom = atom(''); const urlAtom = atom({ pc: '', mobile: ''}); .... 처럼 일일히 쪼개서 관리하는게 맞는 방향인지 모르겠어서 질문드립니다 ! (사수가없어서 물어볼곳이없어요...) 현재는 아래와같이 쪼개서 작업한뒤 submit시에 합쳐주는 방식으로 구현해놓았는데 atom 갯수가 20개 정도 되버리니까 너무 복잡해보여서 이게맞나... 싶어서 질문드리게되었습니다.

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

react에서 상태업데이트 로직 자체가 실행이 안되는 경우도 있나요?

React에서 Modal이 Modal을 호출하는 다중 Modal 구현중 난제를 만나게 되어 질문을 올립니다 소스의 경우 복붙보다는 github 주소를 남기는것이 좋을것 같아서 github링크로 대체하는점 양해부탁드립니다. https://github.com/graylobo/modalTest (간단해서 clone후 바로 실행가능합니다) 로직에 대해 설명을 하자면 아래와 같습니다. 편의상 음슴체로 하는점 양해부탁드립니다. 1. 전역에서 사용될 기본Modal 을 정의 (BaseModal) 2. BaseModal의 on/off의 경우 recoil로 관리 3. useModalStack 을 사용하여 custom modal (TestModal1,2)을 열수있음 4. custom modal은 다른 custom modal을 호출할수 있으며, modal 호출자는 피호출자의 상태를 공유할수 있음. 즉 SomeComponent가 TestModal1을 호출하고, TestModal1이 또다시 TestModal2를 호출했을때, TestModal2의 상태값을 TestModal1에서 받을수 있으며, TestModal1의 상태값을 SomeComponent에서 받을수 있음 위 기능까지는 문제없이 동작하며, SomeComponent의 경우 TestModal1에서 자신의 로컬상태(inputData)가 있고 확인버튼 클릭시 currentModal.handleConfirm?.(inputData) 가 호출되고 SomeComponent의 handleConfirm에 지정한 콜백로직이 실행되면서 setReceivedData를 통해 receivedData의 상태 업데이트가 TestModal1에서 전달한 inputData로 정상적으로 업데이트가 됨. 또한 SomeComponent가 TestModal1을 호출한 프로세스와 마찬가지로, TestModal1에서 TestModal2 를 호출하고 TestModal2에서 자신의 로컬상태(inputData)가 있고 확인버튼을 클릭하여 currentModal.handleConfirm?.(inputData)를 호출하면 TestModal1의 handleConfirm에 지정한 콜백로직이 실행되면서 TestModal2에서 전달한 inputData를 받는것 까지는 정상적으로 동작하는데 여기서 문제는 TestModal1의 setReceivedData를 통해 receivedData의 상태가 TestModal2에서 전달한 inputData로 업데이트가 되어야 하는데 디버깅시 setReceivedData 자체가 아예실행이 되지않음. react개발하면서 useState의 set함수에 전달하는 콜백함수 자체가 실행이 안되는거는 처음 겪어보고 레퍼런스도 없어서 혹시 저와 동일한 문제를 겪거나 해결방안을 알고 계시는 분이 있다면 조언주시면 매우 감사하겠습니다.

리액트의 조건부 처리가 궁금합니다.

프로젝트들을 진행하면서 조건부 처리를 많이 사용하는데 이 두 개의 조건부 처리에 대해서 갑자기 궁금해서 질문 드립니다. const [isMCategoryVisible, setIsMCategoryVisible] = useState(false); - 조건부로 처리 {isMCategoryVisible && <MoblieCategory menu={menu} />} - 스타일 조건부로 처리 <MoblieCategory className={`${isMCategoryVisible && hidden}`} /> 이렇게 자주 사용합니다. 조건부로 처리하는 것은 렌더링을 할때 자바스크립트 조건을 검사하여 참 일때만 요소가 렌더링이 되며, 스타일로 `display:hidden`을 처리하면 HTML 검사할때 `hidden`을 찾아서 처리하지만 여기서 조건으로 처리가 되면 위에 조건부 처리로 하는 것과 같나요? 스타일 조건부로는 애니메이션을 사용할 때 많이 사용한거 같은데 어느 것이 더 효율적이나요??

React 무한 스크롤 구현 방식(useState,useInfiniteQuery) 차이점?

프로젝트를 진행하면서 useInfiniteQuery를 사용해 무한스크롤 기능을 구현했습니다. 방식은 대충 아래와 같이 흘러갑니다. 1. intersection-observer를 사용해 특정 영역이 보이면 useInfinteQuery를 사용해 pageParam를 +1 하고 axios 함수를 호출합니다. 2. 카테고리 별로 상품을 나눴으며 카테고리 재 클릭 시(A->B->A) 캐시가 삭제되어 다시 처음부터 무한 스크롤이 작동 됩니다. 다 만들고 생각해보니깐 뭔가 observer가 활성화되면 axios 함수를 호출 할 때마다 useState를 사용해서 setState(page +1) 이런식으로 적용해서 /shop/getAll/${category}?page=${page} 여기에 넣어주면 구현은 될 거 같습니다. 하지만 이게 성능에 큰 차이점이 있는지도 잘 모르겠고 server 상태를 관리하기 위해 이렇게 사용하는 건가 싶기도 하고.. 두 가지 구현 방식에 대해 차이점을 잘 모르겠습니다. 다른 분들은 왜 사용하고 있는지 궁금합니다. (정확히는 useState를 사용해서 무한 스크롤을 구현하는 방식이랑 useInfiniteQuery를 사용해 구현하는 방식의 차이를 모르겠습니다.)

리액트 타입스크립트 obj[key] 에러

타입스크립트 이제 막 적용해보는 초보입니다.. 코드 내 monitorMenu[type].container 에서 [type]에 에러가 뜨는데 타입 지정이 잘못 된 건지 찾아봐도 원인을 모르겠습니다ㅜㅜ 물어볼 곳이 없어 질문합니다,,! 도움 부탁드립니다...ㅠㅠ // code import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import DashboardContainer from '../containers/DashboardContainer'; import IntegratedContainer from '../containers/IntegratedContainer'; interface IMonitorMenu { [key: string]: { container: string | JSX.Element; }; } const Monitor = () => { const user: any = []; const { type } = useParams<{ type?: string }>(); const navigate = useNavigate(); const [menu, setMenu] = useState('integrated'); const onClickMenu = (name: string) => { navigate(`/monitor/${name}`); }; const monitorMenu: IMonitorMenu = { integrated: { container: <IntegratedContainer /> }, dashboard: { container: <DashboardContainer /> }, }; return ( <div> ... <div>{monitorMenu[type].container}</div> </div> ); }; export default Monitor; // error ERROR in src/pages/Monitor.tsx:37:25 TS2538: Type 'undefined' cannot be used as an index type.

Nextjs App router 동작 방식이 이해가 안됩니다.

https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

Url to state or url and state

흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다. 또한 현재 선택된 button은 색상이 칠해집니다. 이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때 1. setState를 통해 button의 값을 변경함 2. router을 통해 url 경로를 변경함 이렇게 두가지 액션을 취했었습니다. 그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다. 그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.

리액트 useState 와 함수 관리 어떻게 하는게 좋나요?

안녕하세요. 스타트업에서 일하고 있는 신입 프론트엔드 개발자 입니다. 현재 쓰고 방식은 // 이메일 동의 통신 const [emailAgreed, setEmailAgreed] = useState(); const handleEmailAgreementClick = () => { 생략 } // 새로운거 const [새로운거, set새로운거] = useState(); const 새로운거함수 = () => { 생략 } 이렇게 리액트에서 작성을 하고 있습니다. const [등등, set등등] = useState(); 전부다 위로 올려서 적는게 좋은건가요? 아니면 제가 하는 방식 해도 사용해도 문제가 없을까요?

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에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?

혼자 코드를 적을 수 있는 방법 조언부탁드립니다.

안녕하세요 저는 현재 프론트엔드로 취업을 위해 공부중에 있습니다. 인강을 보면서 리액트를 공부중인데 따라하면서 코드를 적거나 미리 나와있는 코드를 보면 전체 다는 아니지만 어느정도 기본은 코드가 이해가 되는정도이고 여기저기 찾아보니 혼자 코드를 적으면서 어떤걸 만들어보는게 좋다라는 글들이 많아서 코드가 아무것도 적혀져 있지 않은 백지 상태에서 혼자 코드를 적을려고 해보니 뭘 적어야되고 어떤걸 해야되는지 너무 막막하더라구요. 예를 들어 useState에 대해 문법적으로는 이해가 되고 알지만 혼자 할때에는 이걸 어떨때 적으면되는지 또 어떨때에는 생각조차 나지 않습니다. 이렇게 혼자 코드를 작성하면서 실력을 키우고싶은데 이럴땐 어떻게 공부를 하면되는지 공부방법 조언 부탁드리겠습니다.

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

리액트 state에 대해 질문있습니다.

안녕하세요 현재 리액트 기초를 공부중인 초보자입니다. 우선 인강을 보면서 공부를 하고 있는데 인강에 나와있는 프로젝트 코드를 봤을땐 전부는 아니지만 어느정도 이해가 되고 하는데 아무것도 안적힌 상태에서 혼자 코드를 작성할려고 하니 하나도 모르겠더라구요. 예를 들어 useState훅을 그 자체 문법으로는 이해가 되는데 이걸 혼자 코드를 작성할때는 언제 작성을 하면되는지 생각조차 나지 않는데 아 이럴때 useState를 쓰면되겠다하고 쉽게 이해할 수있는 방법이 있다면 알려주시면 너무 감사하겠습니다.

리액트 책을 보면서 공부중인데 아래의 코드가 제대로 작동을 않합니다

import { useState } from "react"; type CounterProps = { initialValue: number; }; const Counter = (props: CounterProps) => { const { initialValue } = props; // 계정을 유지하는 하나의 상태를 useState()로 선언한다. 인수에는 초깃값을 지정한다. // count는 현재 상태, setCount는 상태를 업데이트하는 함수다。 const [count, setCount] = useState(initialValue); return ( <div> <p>Count: {count}</p> {/* setCount를 호출해서 상태를 업데이트한다 */} <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button> </div> ); }; export default Counter; 책에 있는거 그대로 코딩 했는데 Property 'initialValue' is missing in type '{}' but required in type 'CounterProps' 이런 에러가 발생해요 왜 그런걸까요

Async await fetch 오류

const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!

이대로는 안될 것 같아 걱정입니다

최근 학부 연구실 프로젝트로 웹 프로젝트를 개발했습니다 처음 해보는 nodejs였고 팀원들의 중도 이탈로 처음 써보는 nextjs였습니다. 다행히 혼자서 공부한 리액트가 있었기에 여차저차 마무리 됐습니다. 여기서 문제는 어느 상황에 어떤 기능을 사용해야 할지는 머릿속에 있습니다. 예를 들어. useState를 사용해 상태 관리를 해야겠다! 식의 생각은 나는데 막상 이를 코드로 작성할때 이게 맞나? 싶을 정도로 머뭇거리고 금방 검색하게 됩니다. Chat GPT의 의존도를 낮추고자 하여도 금방 사용하게 되네요.. 이렇게 해선 제 실력이 하나도 늘지 않을 것이라고 느끼고는 있는데 쉽지않네요.. 어떻게 해야할까요 조언, 독설 모두 감사하게 받겠습니다. 부탁드립니다 ㅠㅠ

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

redux에서 질문있습니다 !

안녕하세요 redux로 프로젝트 진행중인데… 혹시 redux를 사용하시면 비동기데이터는 redux로 처리하지만, 페이지내에서 입력받는 입력 form같은 데이터들은 useState로 페이지 내에서 관리하는지, 아니면 전부 redux로 관리하는지 궁금합니다 !

react에서 함수관리를 어떻게 하시나요..?!

안녕하세요 ! 리액트에 대해서 궁금한점이 생겨서 질문 남기게 되었습니다 ! 예를들어 여러 페이지에 아래의 코드처럼 const [name, setName] = useState<string>(‘’); const handleFormChange = (e: React.changeEvent<HTMLInputElement>) => { const { value } = e.target; setName(value); } 관리해야할 state들이있고 입력창에서의 변화를 핸들링해주어냐한다면, 각 페이지에서 저 handleFormChane를 매번 작성해서 넣어주는게 맞을까요…? 아니면 따른 방식이 있는지 궁금합니다 ! 읽어주셔서 감사합니다 !!!

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ