- 삼항연산자 안에 삼항연산자
className = {this.state.clicked ? (this.state.validate ? 'success' : 'failure') : "" }
위와 같은 문장이 있었다. 이런 문장을 처음봐서 그런지 해석하는 데 시간이 걸렸다.
이제는 한번 해석해봐서 그런지 어떤 의미로 쓴지 수월하게 이해할 수 있었다.
먼저 this.state.clicked이 true이면 (this.state.validate ? 'success' : 'failure')을 해석하고 false면 "" 빈 문자열을 출력하라는 의미였다.
그 다음 this.state.clicked가 true면 (this.state.validate ? 'success' : 'failure')로 들어가서 해석해야한다. 여기서 this.state.validate 가 true이면 'success'를 출력하고 false이면 'failure'을 출력한다는 의미였다.
즉, this.state.clicked -> true -> this.state.validate -> true -> 'success'
this. state.clicked -> true -> this.state.validate -> false -> 'faliure'라고 할 수 있다.
this.state.clicked -> false -> ""라고 해석할 수 있다.
- 삼항연산자와 객체전개구문
todo.id === id ? {...todo, checked : !todo.checked} : todo
위의 문장을 보면 todo.id 와 id가 같으면 {...todo, checked : !todo.checked} 다르면 todo를 그대로 호출한다는 얘기이다.
여기까지는 삼항 연산자니까 잘 알았는데 이제 {...todo, checked : !todo.checked}가 문제였다. 먼저 ...todo는 todo의 모든 속성을 새로운 객체로 풀어서 복사한다는 의미이다.그리고 checked : !todo.checked를 해석해보면 todo의 checked 속성을 : !todo.checked지금 가지고 있는 checked속성을 반대 값으로 저장하자는 얘기이다.
즉, todo.id가 id와 같다면 checked 속성을 반대로 저장하라는 소리고 todo.id가 id와 다르면 기존에 있던 todo를 그대로 호출하라는 소리이다.
