나는 몰랐다.
이 Error 하나가 나에게 가져올 파장을 말이다.
1시간에 걸친 " ** 이게 왜 안돼지?"의 향연 끝에는 " *발 이래서 TypeScript를 쓰는구나" 라는 생각만이 남게 되었다.
더불어, .map() 메서드의 ( ) 소괄호 { } 중괄호 사용의 차이점에 대해서도 이번에 확실히 알게 되었다.
Error Log
Line 8:9: Expected an assignment or function call and instead saw an expression no-unused-expressions
Search for the keywords to learn more about each error
React Component Code
const todoList = todos.map(({id,text,checked})=>{
<TodoItem
id={id}
text={text}
checked={checked}
onToggle={onOffToggle}
onRemove={onRemove}
key={id}
/>
})
Reson Why Error Occurred
에러의 발생 원인은 map() 메서드를 사용할때 주의점과 동일하다.
.map(()=>{ }) 메서드를 중괄호와 같이 사용할때는 { } 중괄호 안에 return이 존재해야 한다.
하지만, React Component Code를 확인해 보면,
.map() 메서드를 사용했음에도 불구하고 return을 사용하지 않았다.
따라서 해당 에러의 해결방법은 아래와 같다.
How Can I Solved ?
- .map() 메서드에서 { } 중괄호를 사용할때 return 을 사용한다.
- .map() 메서드를 사용할때 요소를 ( ) 소괄호를 사용해서 묶어준다.
Solution #1
.map(({id,text,checked})=>{return (<TodoItem/>)})
Solution #2
.map(({id,text,checked})=>(<TodoItem/>))
Conclusionally determined solution
최종적으로 선택한 방법은 Solution #2 이다.
Solution #2는 .map() 메서드를 사용할때, 요소를 ( ) 소괄호에 담아서 사용하여 방법이다.
결론적으로 .map() 메서드를 사용하여 반환되는 것은 컴포넌트 하나이기 때문이다.
const todoList=todos.map(({id,text,checked})=>(
<TodoItem
id={id}
text={text}
checked={checked}
onToggle={onOffToggle}
onRemove={onRemove}
key={id}
/>
))
댓글