&& 조건부 랜더링, 삼항연산자, Optional Chaining

&& 조건부 랜더링

&&조건부 랜더링은 AND연산자를 사용한다. 특정 조건이 만족할 때 내용을 보여주고 만족하지 않을 때 내용을 보여주지 않을 때 사용한다.

function App() {
	const name = "리액트"
    return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>
}

위 코드를 나타내면 name이 리액트이기 때문에 리액트입니다 가 잘 나타나 질 것이다. 하지만 name값을 다른 것을 바꾸게 된다면 name === "리액트"가 거짓일 되어서 리액트입니다 는 나타나지 않을 것이다.

이처럼 &&조건부 랜더링은 && 앞쪽에 있는 부분이 true이면 뒷 부분을 랜더링 해주고 false이면 랜더링을 해 주지 않습니다.

---

삼항연산자

삼항 연산자는 if문을 대신해서 쓸 수 있다. 삼항연산자는 항이 3개가 들어가서 삼항연산자인데 각 항들은 ? 와 : 으로 구분을 한다.

function App () {
	const name = "리액트"
    return (
    	<div>
      		{name === "리액트" ? <h1>리액트</h1> : unll}
      	</div>
    )
}

?를 기준으로 앞에 항이 true인지 false인지 확인한다. 그리고 만약 true이면 :를 기준으로 앞의 항을 랜더링 해주고 false이면 뒷에 값을 랜더한다.

---

Optional Chaining

optional chaining은 가장 최신에 생긴 문법이다.
optional chaining은 type에러가 발생하는 것을 방지하기 위해서 생겼다.

user ={
	name = {
		frist: "철수",
        last:"김"
    }
}

user.name.frist // 철수

우리는 . 을 사용하여 체이닝을 할 수 있다.

user.address.street // typeError

없는 내용을 쓰게 되면 typeError가 발생하게 될 것이다.
이를 방지하기 위해서 if 나 &&조건부 랜더링을 사용할 수 있다. optional chaining은 더 짧고 간결하게 사용을 할 수 있다.

user?.name.frist

만약 user가 있다면 계속해서 체이닝을 진행하고 없다면 typeError가 아니라 undefind값을 얻게 된다.