[React Document] 조건부 렌더링

이 포스팅은 React Document 주요개념 조건부 렌더링 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다.

React에서는 원하는 동작을 캡슐화 하는 컴포넌트를 만들수 있으며, Application의 상태에 따라 컴포넌트중 몇개만을 선택해 렌더링할 수 있다.

예제를 보면 다음과 같습니다

function UserProfile() {
  return <h1>나는 YundleYundle입니다 </h1>
}

function GuestProfile() {
  return <h1>나는 Guest입니다 </h1>
}

function Profile(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserProfile /> : <GuestProfile />
}

만약 Profile을 보여주는화면에서 User인지 Guest인지에 따른 값을 보여주기위해서는 다음과 같이 작성할 수있습니다.

다양한 예제를 모두 적지는 않았지만 위의 코드와 다르게
변수안에 컴포넌트를 담고 해당 변수를 return안에 넣어서 사용하도록 하는방법도 있습니다

function Profile(props) {
  const isLoggedIn = props.isLoggedIn;
  const element = isLoggedIn ? <UserProfile /> 
        : <GuestProfile />
  
  return (
    <div>
      {element}
    </div>
  )
}

💡 논리 &&연산자로 IF를 인라인으로 표현하기

JSX안에서 중괄호를 이용하여 표현식을 포함 할 수 있습니다. 따라서 그 안에 논리 연산자인 &&를 사용하면 쉽게 조건부 렌더링을 구현할 수 있다.

function NumberBox(props){
 // props.numberMessage의 Type은 배열이라고 가정.
 const numbers = props.numberMessage;
  
 return (
   <div>
     <h1>안녕!</h1>
     {numbers.length > 0} && <h1>numbers의 길이는 : {numbers.length} 입니다.</h1> 
   </div>
   
 ) 
}

&&는 앞에있는 조건이 true일때 뒤에 오는 조건식이 실행되고 앞에있는 조건이 false라면 뒤에 있는 표현식을 건너뛰기 때문입니다 따라서 실제로 위의 NumberBox를 렌더링 하게 된다면 props.numberMessage의 길이가 1개 이상이라면 &&뒤에 오는 element를 출력하고 없다면 아무것도 출력하지 않게 됩니다.

또 다른 방법으로는 if-else 인라인으로도 표현이 가능합니다.

function UserProfile() {
  return <h1>나는 YundleYundle입니다 </h1>
}

function GuestProfile() {
  return <h1>나는 Guest입니다 </h1>
}

function Profile(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserProfile /> : <GuestProfile />
}

💡 컴포넌트가 렌더링하는 것을 막기

가끔은 해당 조건에 따라 컴포넌트가 렌더링되는것을 숨기고 싶을 때가 있을 수 있습니다. 이럴때는 렌더릴 결과룰 출력하는 대신 null을 반환하면 해결할 수 있습니다.

function UserProfile() {
  return <h1>나는 YundleYundle입니다 </h1>
}

function GuestProfile() {
  return <h1>나는 Guest입니다 </h1>
}

function Profile(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserProfile /> : null;
}