React에서 조건문 사용하기

*Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다.

*자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. Ternary Expression으로 조건문 사용하기

JSX에서 if 문으로는 조건문을 사용할 수 없다. 대신 Ternary Operator를 이용해서 조건문을 작성해야 한다.

return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <button 
          style={style}
          onClick={this.togglePersonsHandler}
          >Switch Name</button>
        { this.state.showPersons ? 
            <div>
              <Person 
                name={this.state.persons[0].name}
                age={this.state.persons[0].age} />
              <Person 
                name={this.state.persons[1].name}
                age={this.state.persons[1].age}
                click={this.switchNameHandler}
                changed={this.nameChangedHandler}>
                  My Hobbies: Racing</Person>
              <Person 
                name={this.state.persons[2].name}
                age={this.state.persons[2].age} />
          </div> : null }
      </div>
    );

Ternary Expression를 작성할 코드를 {} 전체 중괄호로 묶어서 자바스크립트 코드임을 알려준 후, 그 안에서 조건문을 작성했다.

 

2. Ternary Expression이 아닌 방식으로 조건문 사용하기

하지만 앱이 점점 커질수록 Ternary Expression으로 작성할 경우 코드 이해가 어려워진다. render() 메소드는 렌더링이 발생할 때마다 실행되므로, 그 안에서 아래와 같이 정의해줄 수 있다.

render() {
  let persons = null;
  if (this.state.showPersons) {
    persons = (
      <div>
        <Person 
          name={this.state.persons[0].name}
          age={this.state.persons[0].age} />
        <Person 
          name={this.state.persons[1].name}
          age={this.state.persons[1].age}
          click={this.switchNameHandler}
          changed={this.nameChangedHandler}>
          My Hobbies: Racing</Person>
        <Person 
          name={this.state.persons[2].name}
          age={this.state.persons[2].age} />
      </div>
    );
  } // persons를 default로 null로 놓고, 조건에 따라서 div를 할당한다.

return (
  <div className="App">
    <h1>Hi, I'm a React App</h1>
    <p>This is really working!</p>
    <button 
      style={style}
      onClick={this.togglePersonsHandler}
      >Switch Name</button>
    {persons} // 그리고 위에서 담은 persons 변수를 return시킨다.
  </div>
);

person 변수에 최초 null을 담아두고, if 문을 이용해서 특정 조건 하에서는 person 변수에 JSX를 이용해서 리턴시킬 HTML element를 담아준 후, return 문에서 해당 변수를 참조하게 하면 된다.