리액트 이벤트 처리

• 리액트 이벤트는 소문자 대신 camelcase로 작성
• 문자열이 아닌 JSX로 함수 전달

<button onClick={() => {saveUserData(bob)}}>Save</button>
<button onClick={goback}>Go back</button>
//goback은 함수 이름
<input onChange={(e) => {saveData(e.target.value)}>

조건부 렌더링

//if랑 else로 쓰기(넘 길어서 잘 안씀)
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

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

//삼항 연산자 ver
return (
   <div>
     The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
   </div>
 );

//논리 연산자 &&
return (
   <div>
     <h1>Hello!</h1>
     {unreadMessages.length > 0 &&
       <h2>
         You have {unreadMessages.length} unread messages.
       </h2>
     }
   </div>
 );

깔끔하기는 논리 연산자가 제일 좋은 듯