[항해99] Day16. TIL – React(리액트) 에서 JSX 배열 반복문 / React – Router v6 변화

⭐ React(리액트) 에서 배열 반복문 쓰기

이번 주에 주어진 개인 과제를 하기 위해서 코드를 썼는데, 공부할 때는 술술술 적히던 코드가 갑자기 꽉! 막혔다.

바로 배열 때문이였는데, return () 안에서 for문을 불러 낼 수 있나, 없나에 대한 의문과 늘 상 map()으로만 반복문을 만들어내던 버릇으로 한참을 헤매였다. 일단, 못 불러낸다! ㅎ 역시나 기억에 없었던 이유가 확실하게 있었다.

for문 자체를 return () 값 안에서 불러낼 수 없지만 함수로 위에서 쓰고 JSX를 반환하는 함수로 호출을 할 순 있다!

개인 과제로 만들고 있는 일주일 평점을 주는 프로젝트인데, 앞선 메인 페이지에 뜨는 평점이 들어가 있는 부분은 랜덤 숫자를 뽑아서 💜🤍 이모티콘을 이용해서 만들었다. 이 때 랜덤으로 뽑힌 숫자가 들어가있는 데이터 값이 props 타입으로 컴포넌트에 전해지기 때문애 랜덤 숫자만큼의 배열을 새로 만들어줘야했다.

 

배열을 생성할 때 만들 수 있는게 for문 밖에 없을 것 같은데, return()에서 바로 쓸 수가 없어서 답답했다.

 

해결코드

 const { id, score, date} = day


    const Happy = () => {
        let scoreArr =[];
    for(let i=0; i<score; i++){
        scoreArr.push(<li>💜</li>)
    }
     
    return scoreArr; 
    }

    const Sad =() => {
        let scoreArrr =[];
        for(let j=0; j<5-score; j++){
            scoreArrr.push(<li>🤍</li>)
        }
        return scoreArrr;
    }

✔ 스코어를 준 부분을 Happy()라는 함수로 점수가 안 들어가는 부분을 Sad()라는 함수로 배열을 두 개를 만들어서 합쳐주면 총 5개의 하트가 나오게끔 해줬다.

✔함수를 호출해주고 return()부분에서 함수를 호출해서 받는거다

 

 

    return (
        <>
            <Score key={id}>
                <p>{date}</p>
                <ul>
                    {Happy()}
                    {Sad()}
                </ul>
                <button onClick={onClick}>점수주러가기</button>
            </Score>
        </>
    )

✔ 분명 더 간결한 코드가 있을 것 같은데 아직은 생각이 잘 안 나서 조금 더 알아봐야할 것 같다.

 

 

 

⭐ React – Router v6 변화에 따른 오류 파티~ 😵

라우팅은 이전에 독학하면서 미니 프로젝트 만들 때 몇 번 써본 기억이 있어서 수월하게 공부해 나갈 수 있을 것이라고 생각했는데! 뭔가 오류가 많이 나는 것이다.

 

알고보니 Route v6 가 나와서 그런것!!!!! 내가 겪었던 오류 몇 가지를 이야기 해보려고 한다.

✔ useHistory() 대신에 useNavigate()

useHistory 대신에 useNavigate()가 생겼다. 이걸 몰라서 오류속에서 또 헤맸다.

useHistory.push(“/”) 해야했는데 useNavigate를 쓰고 push를 안 붙여줘도 된다 😀

✔ Switch 대신에 Routes!

Route를 묶어주던 Switch 대신에 Route에서 s가 붙은 Routes 라는 것이 생겨났다!!! 훨씬 직관적이라서 이건 좀 좋은 것 같다!

✔ Route 쓸 때 exact가 사라졌다!!

Route path=”” 쓸 때 함께 쓰던 exact가 사라졌다. 이거 붙여서 쓰면 오류난다.

✔ component 말고 element 로!

<Route component ={ component } />

라고 쓰던 구문에 component가 element로 바꼈다!

오류를 수정하기 위해서 공부하면서 참조한 블로거님의 포스팅 공유합니다! 👉🏻 React-Router v6 변화 알아보기

 

 

 

 

 

💜 회고

이번 주에 전달 받은 5주짜리 강의를 2주에 걸쳐서 듣는다고 한다. 순간 조금 화가 났다. 물론 비전공자들과 함께하는 부트 캠프라는 걸 알고 들어왔고, 나도 강의의 퀄리티에 대한 기대보다는 팀 프로젝트를 쌓을 수 있다는 장점에 시작한 거긴 한데. 이 정도 배우고 클론 코딩 & 프로젝트를 한다면 진짜 멘탈 갈릴 것 같은데? 라는 생각이 들었다. 오늘 리덕스까지 듣는데, 이전에 리덕스라는 것을 한 번 다뤄봤던 나도 이제야 이해가 될 법하다는 생각이 드는데, 이런 커리큘럼이 괜찮은가? 라는 생각을 끊임없이 하게 되고. 내가 과연 이런 학습으로 심화 단계로 점프가 가능할까? 라는 의구심도 들기 시작했다. 기초가 약하다고 생각해서 초급 강의 듣는 것도 좋다고 생각했는데 하루하루 사람들이 캠프를 이탈해가는 모습을 보면 엄청 흔들린다.
이미 다른 곳에서 리액트 강의를 들을 거라고 말하는 사람들이 많다 ㅋㅋㅋㅋ 오마이갓… 커리큘럼이 엄청 빡신 것 같으면서도 느슨한 것 같고 리액트는 입문만 2주고 심화는 1주만 한다. 5주차 강의를 2주 동안 보는 거다.
나는 이번 주에 다 끝낼 것 같은데, 뭔가…. 뭔가…… 뭐가……..뭔가…… 아쉽다. 그래서 강의에 붙어있는 숙제로 내주는 프로젝트를 아주 탄탄하게 만들어서 하나의 웹 어플리케이션으로 만들어 보려고 한다! 그러면 이번 주에 2가지 프로젝트를 만들 수 있게 된다!