React API 서버에서 받아온 json, array 객체 저장

Question

안녕하세요 선배님들.리액트 공부를 목적으로 리그 오브 레전드 전적 웹사이트를 만들어보고 있는 대학생입니다. API 서버 코드router.get('/match/:gameId', function(req, res, next) { res.header(&#34;Access-Control-Allow-Origin&#34;, &#34;*&#34;); res.header(&#34;Access-Control-Allow-Headers&#34;, &#34;X-Requested-With&#34;); const gameId &#61; Number(req.params.gameId); var url &#61; &#96;https://kr.api.riotgames.com/lol/match/v4/matches/${gameId}?api_key&#61;${api_key}&#96;; fetch(url) .then(response &#61;> response.json()) .then(body &#61;> { res.send(body); }); }); 넘어오는 json data{ &#34;gameId&#34;: 4748128389, &#34;platformId&#34;: &#34;KR&#34;, &#34;gameCreation&#34;: 1603960986207, &#34;gameDuration&#34;: 1146, &#34;queueId&#34;: 440, &#34;mapId&#34;: 11, &#34;seasonId&#34;: 13, &#34;gameVersion&#34;: &#34;10.22.341.643&#34;, &#34;gameMode&#34;: &#34;CLASSIC&#34;, &#34;gameType&#34;: &#34;MATCHED_GAME&#34;, &#34;teams&#34;: [...], &#34;participants&#34;: [...], &#34;participantIdentities&#34;: [ { &#34;participantId&#34;: 1, &#34;player&#34;: { &#34;platformId&#34;: &#34;KR&#34;, ..... &#34;summonerName&#34;: &#34;소환사명&#34;, .... } },,,, ] } React에서 활용하는 부분let teamInfo &#61; useRef({}); ... console.log(&#34;team&#34;, game); teamInfo.current &#61; game.participantIdentities; ... {teamInfo.current[0].player.summonerName} React에서 활용하는 부분의 console.log 결과 필요하다고 생각하는 부분들을 첨부했습니다!!제가 원하는건 useRef 변수에 game 안의 &#34;participantIdentities&#34; 객체를 넣고,다시 그 객체 안에 접근해서 player의 summonerName을 가져오려고 하는데 이게 생각처럼 안됩니다. teamInfo.current[0]을 그대로 사용하면 분명히 제가 생각한대로participantId와 player를 키로 갖고 있다고 브라우저에 에러 메시지가 뜨는데요.그러고 나서 player에 접근하고 summonerName에 접근하면 또 안됩니다 ㅜㅜ 뭐가 문제일까요?

초보자1212 · Accepted Answer

네 useEffect 로 렌더링전에 셋팅하는건 불가능합니다리액트 생명주기에 대해 공부를 한 번 해보시는 것을 추천합니다오류는 피하고싶다면 크게 2가지 방법이 있는데 1. useRef 에 초기값으로 필요한 값을 모두 넣어서 참조 오류 방지2. 렌더링하는 부분에서 {summonerInfo.current.x && (

)}이런식으로 조건부 렌더링을 해도 오류는 피할 수 있습니다

초보자1212 · Answer

코드를 좀 자세히 보여주시면 좋을 것 같아요너무 단편적인것만 보여주셔서 뭐가 문제다라고 말씀드리기가 애매하네요오류가 발생할 수 있는 여지는{teamInfo.current[0].player.summonerName}이걸 렌더링하는 구간에 넣어버리면 초기값은 {} 니까 참조오류로 터지게 될 겁니다

혹등혹등 · Answer

import React, { useState, useEffect, useRef } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; const Users = () => { const { nickname } = useParams(); const [ loading, setLoading ] = useState(false); const [ matchList, setMatchList ] = useState([]); const [ gameList, setGameList ] = useState([]); const [ champions, setChampions ] = useState({}); let index = useRef(0); let scrolling = useRef(false); let accountId = useRef(""); let summonerId = useRef(""); let summonerInfo = useRef({}); let leagueInfo = useRef([]); useEffect(() => { axios.get(`http://localhost:9000/users/${nickname}`) .then(({ data }) => { console.log("[사용자 정보]", data); summonerInfo.current = data; accountId.current = data.accountId; summonerId.current = data.id; console.log("[사용자 ID]", accountId.current); const url = 'http://ddragon.leagueoflegends.com/cdn/10.23.1/data/en_US/champion.json'; axios.get(url).then(({data}) => { for(let idx in data.data) { const value = String(data.data[idx].key); setChampions((state) => { return { ...state, [value] : idx }; }); } }).then(() => { loadMatchList(accountId, index); }); }); //window.addEventListener('scroll', scrollHandler, true); }, []); const loadMatchList = (accountId, index, callback) => { const url = `http://localhost:9000/matchelists/${accountId.current}`; console.log(`[전적 정보 검색] URL : ${url}`); axios.get(url, { params : { beginIndex: index.current, endIndex: index.current+10 } }) .then(({ data }) => { index.current += 10; console.log("index :", index.current); setLoading(true); setMatchList(prev => [...prev, ...data.matches]); data.matches.forEach(match => { const url = `http://localhost:9000/match/${match.gameId}`; axios.get(url) .then(({data}) => { setGameList(prev => [...prev, data]); }); }); if(callback) callback(); }); axios.get(`http://localhost:9000/league/${summonerId.current}`) .then(({data}) => { leagueInfo.current = data.data[0]; console.log("[리그정보]", data.data[0].tier); }) } const containerStyle = { width : "100%", height : "100%", } const profileStyle = { width : "100%", height : "100px", display : "inline-flex", zIndex : "0", } const profileIconStyle = { width : "100px", height : "100px", } const ProfileLevelStyle = { position : "relative", bottom : "0", left : "-50%", backgroundColor : "white", zIndex : "2", } const matchesStyle = { margin : "10px", border : "2px solid #D3DEE9", } const loadButtonStyle = { width: "100%", } const loadButtonHandler = (event) => { /* let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); let clientHeight = document.documentElement.clientHeight; if(scrollTop + clientHeight === scrollHeight) { if(!scrolling.current) { scrolling.current = !scrolling.current; loadMatchList(accountId, index, () => { scrolling.current = !scrolling.current; }); } }*/ if(!scrolling.current) { scrolling.current = !scrolling.current; loadMatchList(accountId, index, () => { scrolling.current = !scrolling.current; }); } } return( loading === true ?

{summonerInfo.current.summonerLevel}

{summonerInfo.current.name}

{matchList.map(_element => { return(

) })}

:

) } const Match = ({ gameId, element, gameList, champions, nickname }) => { const [ clicked, setClicked ] = useState(false); const [ spell1Id, setSpell1Id ] = useState(0); const [ spell2Id, setSpell2Id ] = useState(0); const date = new Date(element.timestamp); let gameInfo = useRef({}); let playerInfo = useRef({}); let teamInfo = useRef({}); const summonerSpell = { "1": "SummonerBoost", "3": "SummonerExhaust", "4": "SummonerFlash", "6": "SummonerHaste", "7": "SummonerHeal", "11": "SummonerSmite", "12": "SummonerTeleport", "13": "SummonerMana", "14": "SummonerDot", "21": "SummonerBarrier", "30": "SummonerPoroRecall", "31": "SummonerPoroThrow", "32": "SummonerSnowball", "39": "SummonerSnowURFSnowball_Mark", } const gameMode = { "CLASSIC": "소환사의 협곡", "ODIN": "수정의 상처", "ARAM": "우르프", "TUTORIAL": "튜토리얼", "URF": "우르프", "DOOMBOTSTEEMO": "봇전", "ONEFORALL": "단일모드", "ASCENSION": "ascension", "FIRSTBLOOD": "firstblood", "KINGPORO": "킹포로", "SIEGE": "넥서스모드", "ASSASSINATE": "assassinate", "ASAR": "랜덤모드", "DARKSTAR": "darkstar", "STARGUARDIAN": "스타가디언", "PROJECT": "PROJECT", "GAMEMODEX": "GAMEMODEX", "ODYSSEY": "오디세이모드", } useEffect(() => { gameList.forEach(game => { if(game.gameId === gameId) { gameInfo.current = game; console.log("team", game); teamInfo.current = game.participantIdentities; game.participantIdentities.forEach(pidt => { if(pidt.player.summonerName === nickname) { game.participants.forEach(p => { if(p.participantId === pidt.participantId) { playerInfo.current = p.stats; setSpell1Id(p.spell1Id); setSpell2Id(p.spell2Id); } }); } }); } }); }); const timeForToday = value => { const today = new Date(); const timeValue = new Date(value); const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60); if (betweenTime < 1) return '방금 전'; if (betweenTime < 60) { return `${betweenTime}분 전`; } const betweenTimeHour = Math.floor(betweenTime / 60); if (betweenTimeHour < 24) { return `${betweenTimeHour}시간 전`; } const betweenTimeDay = Math.floor(betweenTime / 60 / 24); if (betweenTimeDay < 365) { return `${betweenTimeDay}일 전`; } return `${Math.floor(betweenTimeDay / 365)}년 전`; } const clickHandler = () => { setClicked(!clicked); if(clicked) console.log("펼쳐짐"); else console.log("닫힘"); } const matchStyle = { height: "100px", border: "1px solid #D3DEE9", display: "flex", backgroundColor: playerInfo.current.win ? "#a3cfec" : "#e2b6b3", } const championIconStyle = { width: "100px", height: "100px", } const spellDivStyle = { width: "18%", marginLeft: "5px", } const kdaDivStyle = { width: "13%", marginLeft: "5px", fontSize: "140%", } const tableStyle = { height: "100%", verticalAlign: "center", textAlign: "center", margin: "0 auto", } const statDivStyle = { width: "13%", marginLeft: "5px", } const spellDiv2Style = { height: "100%", } const spellDivBottomStyle = { display: "flex", marginTop: "7px", } const spellTimeDivStyle = { margin: "23px auto", } const itemDivStyle = { width: "15%", } const itemEmptyStyle = { width: "35px", height: "35px", marginTop: "-5px", backgroundColor: "rgba(0,0,0,0.2)", } const teamDivStyle = { } return(

{gameMode[gameInfo.current.gameMode]}·{timeForToday(date)}

{`${(gameInfo.current.gameDuration/60).toFixed(0)}분 ${gameInfo.current.gameDuration%60}초`}

{playerInfo.current.kills}	/	{playerInfo.current.deaths}	/	{playerInfo.current.assists}
{playerInfo.current.deaths === 0 ? "Perfect" : ((playerInfo.current.kills + playerInfo.current.assists) / playerInfo.current.deaths).toFixed(2)}
{playerInfo.current.largestMultiKill === 2 && "더블킬"}{playerInfo.current.largestMultiKill === 3 && "트리플킬"}{playerInfo.current.largestMultiKill === 4 && "쿼드라킬"}{playerInfo.current.largestMultiKill === 5 && "펜타킬"}

{"레벨 "+playerInfo.current.champLevel}
{`${playerInfo.current.totalMinionsKilled} (${(playerInfo.current.totalMinionsKilled/(gameInfo.current.gameDuration/60)).toFixed(1)}) CS`}

{playerInfo.current.item0 === 0 ? : }	{playerInfo.current.item1 === 0 ? : }	{playerInfo.current.item2 === 0 ? : }	{playerInfo.current.item6 === 0 ? : }
{playerInfo.current.item3 === 0 ? : }	{playerInfo.current.item4 === 0 ? : }	{playerInfo.current.item5 === 0 ? : }

{JSON.parse(teamInfo.current[0])}

{clicked === true ?

펼쳐진 상태

:

접 힌 상 태

}

) } export default Users;초보자1212 // 공부하고 있는 입장이라 코드가 많이 더럽고 난잡해서 최대한 필요해보이는?부분만 올렸습니다 죄송합니다 ㅜㅜ 문제가 되는 부분은 403 라인에서 팀원이름을 쭉 테이블에 불러오려고 하는 부분인데요.일단 첫번째 플레이어가 출력되면 10명의 플레이어 이름을 다 출력할 생각이었는데저기서 오류가 나네요... (지금은 이것저것 시도해보느라 JSON.parse 입니다,,....) 제 생각은 teamInfo.current[0]을 json이 아닌 object로? 인식하고 있는 것 같은데 뭐가 문제일까요 ㅠ

초보자1212 · Answer

summonerInfo.current &#61; data; 말씀드린것처럼 여기 이런 값을 넣어주는게 useEffect 안에 있는데 이건 컴포넌트가 한 번 렌더링 된 후에 불립니다그러니까 렌더링하는 부분에서 summonerInfo 는 초기값이 빈 스트링(&#34;&#34;)인데 객체 참조식으로 사용하니까 참조 오류가 발생하는거죠

혹등혹등 · Answer

초보자1212 // 감사합니다.한가지 이해가 안가는건 제가 렌더되기 전에 값을 세팅하려고 useEffect 안에 넣은건데저 값이 렌더링 전에 세팅이 안되는건가요?... 그럼 어떻게 해야하나요?

제관공 · Answer

그런데 애초에 api에서 받아온 데이터를 useRef에 저장하는 이유가 있을까요?그냥 useState를 써도 될 것 같은데

혹등혹등 · Answer

다들 감사드립니다. useEffect()의 작동 순서를 완전히 잘못 이해하고 있었네요.useRef에 저장하는 이유는 제가 useEffect()가 렌더 전에 먼저 일어나는 줄 알고,useState()는 render() 후에 세팅이 된다는 얘길 듣고 그 전에 값을 세팅하기 위해서 사용했는데..완전히 잘못생각했네요.

React API 서버에서 받아온 json, array 객체 저장

7개의 답변

#store 목록