리액트 초보 컴포넌트 리렌더링 질문드려요,,,

Question

안녕하세요.리액트 공부중인 초보 개발자입니다.기존에 개발해둔 스프링 프로젝트에서 클라이언트 사이드 부분을 리액트로 변경하려고 하는데,axios가 계속 호출되는 문제가 생겨서 여쭤봅니다.(질문 내용이 이상한 것 같지만... 리액트를 공부한지 얼마 안되어 키워드를 잘 몰라서...)드리고 싶은 질문은 크게 두 가지인데...혹시 리액트에서는 절대경로 설정이 안되나요...? 이렇게 경로를 설정하면 /client/public/아래에서 이미지를 찾더라구요. 그래서 client 이전 디렉터리로 갈 수 있겠거니 싶어 ".. / .. / src / main / ... " 이런식으로 경로를 설정하면 못찾더라고요,,,ㅋㅋㅋㅠ사실 babel-plugin 같은 모듈을 설치하면 절대 경로를 설정할 수 있다고 하길래 살짝 시도해봤는데 제가 .babelrc 파일의 설정을 잘못했겠지만 에러가 발생하더라고요,,, 절대경로 관련해서 키워드라도 알려주시면 열심히 찾아보겠습니다..이걸 리렌더링이라고 부르는 게 맞는건지 모르겠습니다만...문제가 발생하는 컴포넌트에서는 axios를 사용해서 서버로 요청을 보내면 서버에서 요청을 수행 한 뒤 요청을 반환하면 클라이언트에서 데이터를 화면에 뿌려주는 식의 전형적인 비동기 방식을 사용하고 있습니다.구체적으로 프로세스를 설명드리면1) 클라이언트 사이드에서 문자열을 입력하면 입력한 문자열을 서버 사이드로 전송합니다.2) 서버 사이드에서는 전달받은 문자열을 확인 후 selenium을 사용해서 문자열에 해당하는 정보를 검색합니다.(selenium을 사용한 이유는 해당 페이지가 비동기방식으로 데이터를 보여주기 때문에 click이벤트가 필요했기 때문)3) 문자열에 해당하는 정보는 5개의 이미지를 가지고 있고, 5개의 이미지가 한 번에 저장되는 게 아니고 이미지를 순차적으로 클릭해서 저장하도록 되어있습니다. (즉 5번의 클릭 필요)4) 저장이 완료된 후 서버 사이드에서 클라이언트 사이드로 완료되었다는 요청을 보내면 클라이언트 사이드에서는 응답을 받고 화면에 데이터를 출력합니다.아래 프로젝트 구조를 간단히 설명드리면 client 안에는 리액트 소스가 있고 src 안에는 스프링 관련 코드가 있습니다.기존에는 / src / ... / static / img 아래 데이터가 저장되었고, 마찬가지로 리액트에서 절대경로를 사용해서 사용하면 되겠거니 별 생각 없이 진행하다가 이미지 경로 설정에 문제가 생겼습니다.그래서 저장 경로를 /client/public 아래 img폴더로 설정해두고 데이터를 저장하니까 위의 일련의 과정에서 이미지가 하나씩 저장될 때마다 다시 서버에 재요청을 보내는(무한반복되는) 현상이 발생합니다.그래서 재요청 보낼 때마다 화면이 초기화되는? 이걸 리렌더링이라고 부르는게 맞나 모르겠지만... 얘가 왜 이러는건지 원인을 알고 싶어요...처음엔 public에 데이터가 추가되면 리렌더링된다고 생각했었는데 그건 아닌 것 같고, useState랑 useEffect를 사용해서 상태관리를 하라고 하던데 음 어차피 서버에서 응답은 한 번만 받는데 이걸 계속 리렌더링 하게되는 이유를 모르겠다고 해야할까요..아음 표현을 잘 못하겠어서 답답하네요... ㅋㅋㅋ ㅠㅠ프로젝트 구조입니다.project | |ㅡㅡ client | |ㅡpublic | lㅡimg | | |ㅡㅡ src | |ㅡmain | |ㅡ java | |ㅡ resources | |ㅡ static | |ㅡ img ....컴포넌트 소스 일부입니다const DataDisplay = ({ str }) => { const urlPre = "https://url~~~"; const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const url = urlPre + '/api/test'; const response = await axios.get( url, {params:{id:str}}); setData(response.data); setIsLoading(false); } catch (error) { setError(error.message); setIsLoading(false); } }; fetchData(); }, [str]); if (isLoading) { return

Loading...

; // 데이터 로딩 중일 때 표시할 내용 } if (error) { return

Error: {error}

; // 데이터 로딩 중 에러가 발생했을 때 표시할 내용 } return (

{data.BasicInfo.job} {data.Info.name} {data.Info.ImgPath}

); }; export default DataDisplay;부족한 질문 읽어주셔서 감사합니다!즐거운 주말 보내세요~!

몰랑토끼 · Answer

한 프로젝트 안에 react와 java둘다 있는건가요? 리액트 컴포넌트 코드안에서 이터레이블한 데이터를 받아올땐 저렇게 바로 넣으면 에러날꺼에요

글펑하지맙시다 · Answer

str을 props에서받아서 디펜던시 배열에 넣으셨는데, url파라미터로 들어가네요. str에 뭐가들어가는건지 변수명만 봐선 모르겠지만 뭔가 이상한 구조같아요. props가변하면 계속 요청되고 리렌더링되겠네요..절대경로 설정법은 cra로 만드셨으면 공식문서에 다 나와있어요! 웹팩등으로 직접 설정하셨으면 관련설정 해주시면될거같구요

리액트 초보 컴포넌트 리렌더링 질문드려요,,,

2개의 답변

기술 목록