[React 개발일지] object x개가 있는데 각자의 id에 맞게 x개의 object 중 원하는 정보 랜더링 하기 (undefined 해결법)

현 상황:

object 더미 리스트를 만들었고, object에는 각각의 id에 맞게 서로 다른 정보가 담겨 있었다

ex) {id:1, name: jeong, age:22, position:cm } 이런 데이터가 id 2 3 같은 형식으로 존재

 

목적: pages/id 에서 id에 맞게 각 id의 정보를 랜더링 해주고 싶었다.

(players/1 이면 jeong, 22 ,. ..... 

players/2면 valverde, 25, .... 이런식으로)

 

먼저 useEffect를 활용해서 입력받은 Context.Provider로부터 받아온 userData의 조건에 따라 target id를 찾았다

useEffect

id= useParams 를 통해서 파싱했다

https://github.com/JeongYujae/Kick_With_Me

(코드 참조)

 

또한 최적화를 위해 id와 userData ( 즉 랜더링 해야하는 데이터가 바뀔 때만 useEffect를 실행시켜주었다)

 

그러고 나서!!

 

이 정보들을 return 에서 쓰려고 봤더니? 

 

userData 가 undefined 값이라 find 함수를 실행할 수가 없었다

 

find는 빈 리스트에서는 오류가 났고, 빈 리스트가 아님을 조건으로 걸어줘야 했다

 

해결코드

{} 안에 data&& 를 넣어줘서, data가 존재하고 존재한다면, 각자의 tag들에 원하는 값들을 랜더링 해줘라! 라고 코드를 짰다

 

이는 결과적으로 pages/:id 로 설계해뒀기에, id가 바뀜에 따라 id에 따른 각기 다른 정보들을 랜더링 할 수 있었다.