[React] # 6 조건부 렌더링

조건문 If와 컴포넌트(JSX) 변수화

원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. if 나 조건부 연산자 와 같은 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하여, 컴포넌트를 선택적으로 나타낼 수 있습니다.

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    // 변수에 할당을 통하여 조건부 렌더링을 실현 
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

위의 예시를 보면 로그인 상태에 따라서 보여지는 컴포넌트가 다르게 렌더링됩니다. isLoggedIn 라는 상태에 따라서 버튼의 컴포넌트가 바뀌게 됩니다. 엘리먼트를 저장하기 위해 변수를 사용하며, 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다.

하지만, if를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다.

---

삼항 연산자 / && 연산자

Life Cycle에 관련된 에러 핸들링

데이터를 받아 올 때, 특히 데이터를 읽을 수 없는 undefined 에러를 가장 많이 보게 됩니다. 분명 해당 값이 어느 순간에는 비어있었다는 뜻이고, 상태값의 시점에 관한 문제라면 React 의 Lifecycle 과 연관이 있습니다.

Lifecycle 메서드들의 기본 호출 순서

• constructor
• render
• componentDidMount (fetch → setState)
• render
• componentDidUpdate

2번의 render 과정을 볼 때, 한번은 fetch 함수 실행 전에 render 함수가 실행되고, 나머지 한번은 fetch 함수 실행 후에 호출이 됩니다. 따라서, 값을 가져오기 전에 렌더를 하게 되면서 오류가 발생하게 됩니다. 이를 조건부 렌더링을 통하여 보완할 수 있습니다.

• 삼항 연산자 : 조건의 true / false 에 따라 각기 다른 UI 를 렌더링 할 때 사용, 아무것도 렌더링 하지 않을 땐 null 사용
• && 연산자 : 조건이 true 일때만 특정 UI 를 렌더링 하고 false 일때는 아무것도 렌더링 하지 않도록 할 때 사용
  👉🏻 MDN && 연산자

class Greetin extends Component {
  render() {
    const { isLogin, name, point } = this.props;
    return {
      <div>
        {isLogin ? (
          <div>
            <p>{name}님 환영합니다!</p>
            <p>현재 보유중인 포인트는 {point}원 입니다.</p>
          </div>
        ) : null}
        {isLogin && (
          <div>
            <p>{name}님 환영합니다!</p>
            <p>현재 보유중인 포인트는 {point}원 입니다.</p>
          </div>
        )}
      </div>
    }
  }
}