TIL 20211103 [항해99 49일차]

CardAdd 컴포넌트 조건부 렌더링 적용

'if (cardListCheck.length === 0)'라는 조건을 통해 카드가 하나도 없으면 +가 있는 상자를 보여주며 카드가 하나라도 있을 경우 CardPortfolio 컴포넌트를 보여주게 했다.

const CardAdd = () => {
  const cardListCheck = useSelector((state) => state.cards.cardList);
  const cardList = useSelector((state) => state.cards);

  if (cardListCheck.length === 0) {
    return (
      <Grid>
        <Btn
          onClick={() => {
            history.push('/write');
          }}
        >
          프로젝트 추가하기
        </Btn>
        <Grid>
          +
        </Grid>
      </Grid>
    );
  }
  return (
    <Grid>
      <Btn
        onClick={() => {
          history.push('/write');
        }}
      >
        프로젝트 추가하기
      </Btn>
      {cardList.allIds.map((cardId) => {
        return (
          <Grid key={cardId}>
            <CardPortfolio cardId={cardId} />
          </Grid>
        );
      })}
    </Grid>
  );
};

export default CardAdd;

아래 이미지를 통해 조건에 맞게 화면 변화가 잘 되는걸 확인 할 수 있다.

리액트 조건부 렌더링

• React의 조건부 렌더링은 자바스크립트에서 동작하는 것과 동일하게 동작합니다. if 나 조건 연산자 같은 자바스크립트 연산자를 사용하여 현재 state를 나타내는 요소를 만들고 React가 UI를 업데이트하여 일치시킵니다.

변수를 선언하고 if 문을 사용하는 것은 조건부로 컴포넌트를 렌더링하는 훌륭한 방법이지만, 원한다면 더 짧은 구문을 사용할 수도 있습니다. JSX에 조건을 인라인으로 넣는 몇가지 방법을 소개합니다.

논리 && 연산자가 있는 인라인 조건

• 중괄호로 감싸면 JSX에 어떤 표현식이던 넣을 수 있습니다. 여기에는 자바스크립트 논리 && 연산자도 포함됩니다. 이를 사용하면 요소의 조건부 포함을 더 편리하게 할 수 있습니다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

• 자바스크립트에서 true && expression 은 항상 expression 으로 평가되고, false && expression 은 항상 false 로 평가되기 때문에 이 코드는 동작합니다.
  따라서 조건이 true 라면 && 다음에 오는 요소가 노출됩니다. 만약 조건이 false 라면, React는 이를 무시하고 건너뜁니다.

조건부 연산자를 사용한 인라인 If-Else

• 인라인으로 요소를 조건부 렌더링하는 다른 방법은 자바스크립트의 조건부 연산자인 condition ? true : false 를 사용하는 것입니다.

// 예시1.
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

더 큰 표현을 위해 사용할 수도 있지만 덜 명백하게 보입니다.

// 예시2.
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

• 자바스크립트에서와 마찬가지로 당신과 당신의 팀이 더 읽기 쉽다고 생각하는 것을 바탕으로 적절한 스타일을 선택하면 됩니다. 또한 조건이 너무 복잡해질 때마다 컴포넌트를 추출 하면 좋습니다.

• P.S. 참고자료 : https://reactjs-kr.firebaseapp.com/docs/conditional-rendering.html

---

마이페이지에서 페이지 이동없이 추가하기, 수정하기, 리스트 등의 컴포넌트들이 보여져야되서 컴포넌트를 어떻게 나누고 조건문을 어떻게 해줄지에 대해 생각을 많이 했다.😀 if문으로 조건을 주고나서 리액트 공식문서에서 조건부 렌더링를 찾아봤는데 if문으로 주는것도 좋지만 && 연산자나 삼항연산자를 사용하면 더 짧은 구문으로 만들 수 있다고 한다. 실전 프로젝트 리팩토링 시간을 가질때 && 연산자나 삼항연산자를 사용해서 짧은 구문으로 변경해야겠다!