오늘 배운 것:
1. JSX에서 중괄호{}의 정확한 쓰임새를 알게 됨.
if구문과 for루프는 JavaScript 표현식이 아니기 때문에 JSX(return문) 안에서 사용할 수 없음.
그러나 중괄호와 표현식을 사용해서 조건부 렌더링을 인라인(inline)으로 보다 짧게 표현할 수 있음.
중괄호 안에 map함수를 사용할 수 있는 것은 반복문과 같은 기능을 하지만 내장 함수이기 때문에 사용 가능한 것.
for문을 사용하고 싶다면 return문 바깥에 루프를 도는 함수를 선언한 뒤 return문 안에서 호출해주는 방법이 있다(이 때 key값은 unique하게 할당해줘야 함)
https://codingbroker.tistory.com/123
2. 점 표기법 또한 사용할 수 있음.
여러 개의 컴포넌트를 포함하고 있는 모듈 중에서 특정 컴포넌트를 사용하고 싶을 때 점 표기법으로 그 녀석만 불러올 수 있다.
3. ul-li map 활용은 아래와 같이 하는게 기본.
이런 식으로도 반복문을 만들 수도 있다!
어제의 고찰을 바탕으로 코드를 손봤다.
CalendarData.js
let arrIndex = isFullSize
? (arrIndex = [0, 1, 2, 3, 4, 5])
: totalDate.forEach((arr) => {
if (arr.indexOf(nowDate) !== -1) {
let arrIndex = totalDate.indexOf(arr);
console.log(`arrIndex:${arrIndex}`);
}
});
return (
<>
<ul>
{arrIndex.map((value) =>
totalDate[value].map((date) => <li key={date}>{date}</li>)
)}
</ul>
</>
);우선 arrIndex를 return문 바깥으로 빼고 삼항연산자를 활용해서 아예 하나로(?) 합쳤다. 원래는 return문 바깥에 변수 선언 따로, return문 안에 변수 조건문 따로 했었는데 생각해보니 굳이 나눌 필요가 있을까 싶어 아예 선언과 동시에 조건문을 합쳐보았다.
다만, 이렇게 짜고 나니까 아래와 같은 오류가 콘솔에 찍혔다.
그래서 구글링해보니, 리액트의 컴포넌트 라이프사이클이 실행되는 순서를 생각해보면 변수들이 선언되고 비동기적으로 시간이 오래 걸리는 작업들이 끝나기 전에 먼저 렌더링이 일어나게 되는데 이 때 arrIndex값이 아직 계산되지 않아 undefined인 채로 map 함수에 전달되기 때문에 발생하는 오류였다. 이러한 오류를 방지하려면 default props를 설정해주거나, 아니면 아래와 같이 코드를 수정하면 된다.
return (
<>
<ul>
{arrIndex && arrIndex.map((value) =>
totalDate[value].map((date) => <li key={date}>{date}</li>)
)}
</ul>
</>
);이렇게 하면 최소한 return문 안에서는 undefined error를 볼 일은 사라진다. 아래는 내가 참조했던 블로그 목록.
https://devbirdfeet.tistory.com/47
https://moonformeli.tistory.com/3
그러나 위 코드만으로는 에러를 완전히 잡지 못했다. 똑같이 Cannot access 'arrIndex' before initialization 오류가 떴는데 이번엔 arrIndex의 ? 뒷부분에 떴다. 그래서 아래와 고쳐줬더니 정상적으로 작동했다.
let arrIndex = isFullSize
? [0, 1, 2, 3, 4, 5]
: totalDate.forEach((arr) => {
if (arr.indexOf(nowDate) !== -1) {
let arrIndex = totalDate.indexOf(arr);
console.log(`arrIndex:${arrIndex}`);
}
});아마도 arrIndex = (...) 라고 다시 선언해준게 문제였던 것 같다.
근데 이러고 나니 isFullSize가 true일 땐 잘 렌더링되는데 false일 때 렌더링되지 않는 오류가 발견됐다.
콘솔에는 arrIndex가 잘 계산되는데 렌더링이 안되는걸 보니 return문에서 문제가 있는 것 같다.. 혹시 arrIndex가 배열일 때는 map 함수가 잘 작동하는데 배열이 1개거나 그러면 작동하지 않게 되는걸까? 하나 해결하면 또 하나가 말썽인 내 코드..
우선은 오늘이 지나가기 전에 출간해놓고 내일 기록에 이어서 작성하도록 하자.
