[TIL] 2022-12-14 내배캠 후발대 Todolist 만들기 '추가'하는 부분까지

 

여기서 더 줄이면?

 

 

요러케됨.

 

Null 병합 연산자임.

 

여기서 더 줄이면?

 

 

느낌표 붙이고 물음표 두 개

 

 

요러케됨!

리턴문이 한 줄이면 리턴도 삭제가능! 요로코롬!

 

{todos
 .filter((item) => {
 	if(item.isDone === false) {
    	return item;
    }
 })
 .map((item) => {
 	return (
    	<div style={todoStyleObj} key={item.id}>
       	  <p>{item.title}</p>
          <p>{item.contents}</p>
          <button>완료</button>
          <button>삭제</button>
        </div>
    )
 })
}

// todos를 돌면서 item의 isDone이 false이면 그 item을 리턴해주고
// 그 리턴된 item들을 map으로 또 돌면서 return 안의 형태로 반환해줘라
// map은 전체 div를 리턴하기 때문에 몇 번째 div 인지 알기 위해 key 값을 줘야 함

==> if문을 삼항연산자로 바꾸면

{todos
 .filter((item) => {
 	return item.isDone === false ? item : null;
 })
}
// isDone이 false일 때 item을 주고 그게 아니면 아무것도 주지마
// 이게 만약 map으로 했다면 요소의 개수가 줄어드는 게 아니라 null이 undefined로 들어감

==> 삼항연산자를 null병합연산자로도 가능

{todos
 .filter((item) => {
 	return item.isDone === false ?? item; 
 })
}

==> 더 간략하게 

{todos
 .filter((item) => {
 	return !item.isDone ?? item; 
 })
}

// return문이 한 줄 이면 중괄호 생략 가능

{todos
 .filter((item) => !item.isDone ?? item);
}