[React 99% 에러잡기] Expected an assignment or function call and instead saw an expression no-unused-expressions

 

나는 몰랐다.

이 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}
        />
    ))