조건부 렌더링 (Conditional-rendering ) 에대해 ARABOZA.

Conditional-rendering

은 React 에서 사용하는 조건부 렌더링이다

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.
if나 조건부 연산자(삼항연산자)와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만든는 데에 사용한다. *리액트 공식문서

자바스크립트는 기본적으로 콜스택 (call stack) 방식이라 위에서 부터 차례대로 코드가 실행된다

그리고 코드가 다 실행이 되었다면 화면에 표현되는 방식있다

해당과정에서 데이터가 과다 push 될경우에 화면에 보여질떄 시간소요가 데이터양에 비례하게 되는데

그런경우에 조건부 렌더링을 사용해 데이터를 받아오기전 먼저 보여준후에 받은 데이터를 다음에 보여주는 방식을 사용한다

( UI에서 유저들의 이탈을 막기위함도 있다고 한다)

ex

// 아래 두 코드가 있다고 가정
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

// 사용자의 로그인 상태에 맞게 컴포넌트 중 하나를 보여주는 컴포넌트
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

위 예시를 실행하게 되면 isLoggedIn prop에 따라서 다른 인사말을 렌더링을 하게 된다.

삼항연산자

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다.
맨 앞에 조건문이 들어가고 그 뒤로 물음표와 조건이 참(thuthy)한 값이라면 실행할 식이 물음표 뒤로 들어간다. 바로 뒤로 콜론이 들어가며 조건이 거짓(falsy)한 값이라면 실행할 식이 마지막에 들어간다. 보통 if 명령문의 단축 형태로 쓰인다. *mdn 공식문서

ex

let age = 26;
let beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
// 간단한 예시

쉽게말해 ... 맞다면 앞에값 (true) 를 return 하고
그게아니라면 그뒤에값인(false) 를 리턴한다

ps. 난 처음에 이거배울때 사망연산자인줄알았다...

Optional chaining

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. *mdn 공식문서

해당 연산자는 연결된 객체의값이 undefined 혹은 null 일경우에 객체의 값에 단순하게 접근하는 방법을 제공한다고 한다

예를들어 주소정보를 불러와야하는데 그 주소정보를 가지고있지않다면 에러가 발생한다

그래서 해당연산자를 사용했을때 평가대상이 가져온 데이터가 undefined 혹은 null 이라면
평가를 break 하고 undefined 혹은 null 값을 그대로 반환해준다

ex

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.