[React공식문서읽기] 이벤트 처리, 조건부 렌더링

이벤트 처리

React의 이벤트는 camelCase naming사용을 사용

<button onClick={onClick}>
	Button
</button>

새 페이지를 기본동작 방지 방법

e.preventDefault();

const submit = (e : React.ChangeEvent<HTMLInputElement>){
	e.preventDefault();
}

<form onSubmit={submit}>
	<button type="submit">click</button>
</form>

조건부 렌더링

js의 조건분기처리와 같이 동작함

if(redirect === true){
   return <Redirect to={login_page}/>;
}

return (
   <div>다시 시도하십시오</div>
);
    

변수에 element를 할당하여 그대로 rendering하는 방법

    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>
    );

논리연산 rendering

return(
	//true일때만 rendering
   {dupData.nickname && <img src={check} alt="confirm"/>}
   //true일때, false일때 rendering
   {dupData.nickname ? "사용할 수 있는 닉네임 입니다." : warnText.nickname[0]}
);

이런 형태로 조건에 따라 rendering을 다르게 줄 수 있다.^---^

 

참고1 : ko.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

참고2 : ko.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React