조건부 렌더링

  React에서는 state에 의존하여 일부만 렌더링 시킬 수 있다. 이는 자바스크립트에서 동작하는 것과 동일하게 동작하며 if, 조건 연산자를 사용하여 현재 state를 타나내는 요소를 만들고 react가 UI를 업데이트하여 일치시킨다.

• 조건부 렌더링의 변화
  삼항 연산자 -> || (or), && (and) 연산자 -> Optional Chaning

⚙︎ 논리 && 연산자

   react는 JSX에 중괄호{ } 를 사용하면 그 안에 자카스크립트 표현을 사용할 수 있다. 여기에는 && 연산자도 포함되기에 조건부 포함을 편리하게 할 수있다. 자바스크립트에서는 true && expression은 항상 expression으로, false && expression은 항상 false로 평가되기에 조건이 true라면 && 다음에 오는 요소가 노출되며 false라면 무시하게된다.

⚙︎ Optional Chaning

&& 를 단축한 방법으로 ? 를 사용하면된다.

{data && data.fetchBoard.writer}
{data?.fetchBoard.writer}
{data?.fetchboard?.writer}
// 조건을 더 세세하게 줄 수 있다.

⚙︎ Nullish coalescing

?? 를 사용한 방법으로 null과 그와 비슷한 Undefind 일경우 렌더링을 한다. 이때 false는 해당하지 않는다.

⚙︎ 삼항 연산자

   큰 틀은 && 연산자와 같다. 삼항 연산자는 조건을 물었을때 참이면 오른쪽을 거짓이면 왼쪽을 리턴하기에 이를 이용한 렌더링 또한 가능하다.

• (조건) ? true : false

⚙︎ 렌더링 방지

   컴포넌트가 다른 컴포넌트에 의해 렌더링 되었더라도 이를 숨길 수 있이며 이경우 출력대신 null을 반환한다.

[참고 사이트] https://reactjs-kr.firebaseapp.com/docs/conditional-rendering.html