본캠프 14일차 - Conditional-rendering(조건부 렌더링),(&&,삼항연산자,Optional chaining)

오늘은 조건부 렌더링과 &&연산자, 삼항연산자, optional chaining에 대해 알아보려고한다.

조건부 렌더링을 살펴보기 전에 연산자들 부터 살펴보도록하자

 

  && 연산자, 삼항연산자, optional chaining 

&& 연산자는 &&연산자 왼쪽의 조건이 true일 때 오른쪽의 피연산자를 반환하고 왼쪽의 조건이 false 라면

렌더링이 되지않기 때문에 아무것도 보여지지 않는다.

예시는 아래와 같이 작성할 수 있다.

data = {api를 통해 fetch한 특정 데이터}

{data && ( <div> 데이터가 있는상태 </div>

 

삼항연산자의 경우에는 qqq ? aaa :  bbb  형식으로 나타낼 수 있다. ? 연산자의 왼쪽 피연산자에 대한 조건이 true 일 때 aaa를 반환하고 false라면 bbb를 반환하게된다. && 연산자에 비해 코드가 길어지지만, 2지선다로 표현할 수 있다는 것이 장점이다.

아래와 같이 표현할 수 있다.

data = {api를 통해 fetch한 특정 데이터}

(data ? "데이터가 있음" : "데이터가없음")

 

optional chaining은 위의 두 연산자와 달리 다른 특성을 가지는데, ES2020부터 추가된 기능으로써 null 이나 undefined에 대한 자바스크립트의 오류를 해결해 줄 수 있다. 선언된 변수나 값이 null이나 undefined면 페이지 전체에서 오류가 나타나게 되지만 옵셔널 체이닝을 사용하면 그러한 오류를 없애고 undefined로 반환 시킬 수 있다.

아래와 같이 작성된다.

const qqq = [1, 2, 3, 4, 5]

console.log(qqq?.[1]) // 2
console.log(qqq?.[5]) // undefined

 

  조건부 렌더링  

조건부 렌더링은 특정 컴포넌트를 항상 렌더링 시키지 않기 위해 사용하게 된다. 예를 들면 같은 양식을 사용하는 등록/수정 페이지의 경우 수정조건을 달성했을 때만 수정 컴포넌트를 보여줘야 하기 때문에 조건부 렌더링이 사용된다.

페이지 렌더링은 성능최적화와 관련이 있기 때문에, 성능면에서 사용해주는 것이 좋다. 조건부 렌더링을 할 때 위에 언급했던 연산자들이 사용된다.

 

예시는 아래와 같다.

<EdidPage/> // 수정시에 보여질 컴포넌트
<SubmitPage/> // 등록시에 보여질 컴포넌트
data = { api를 통해 fetch 한 특정 데이터}


{data && (<EditPage>)}

(data ? <EditPage> : <SubmitPage>)