더북(TheBook)

생성자에서 users를 빈 배열로 초기화한다. 이렇게 하면 render()에서 해당 상태가 존재하는지 확인하지 않아도 된다. 상태를 초기화하지 않고 undefined 값으로 두면, 반복적으로 상태의 존재 여부를 확인하는 코드를 작성하게 되거나 버그가 생길 수도 있다. 시간 낭비일 뿐만 아니라 반복해서 작성해야 하므로 피곤하다. 초깃값을 설정해 놓으면 불편을 피할 수 있다! 다시 말해서, 다음과 같이 작성하면 안티패턴이다.

// 안티패턴: 이렇게 하지 마세요!
class Users extends React.Component {
  constructor(props) { ---- 처음에 빈 값을 설정하지 않았다.
      super(props)
  }
  ...
  render() {
      return <div className="container">
          <h1>List of Users</h1>
          <table className="table-striped table-condensed table table-bordered table-hover">
              <tbody>{(this.state.users && this.state.users.length > 0) ? ---- 값의 존재 여부를 확인한다(초깃값이 있으면 확인하지 않아도 된다).
                  this.state.users.map((user) =>
                  <tr key={user.id}>
                      <td>{user.first_name} {user.last_name}</td>
                      <td> {user.email}</td>
                      <td> {user.ip_address}</td>
                  </tr>) : ''}
              </tbody>
          </table>
      </div>
  }
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.