React this.function vs this.function( )
import React from "react";
import { withRouter } from "react-router-dom";
import "./Login.scss";
class Login extends React.Component {
constructor() {
super();
this.state = {
idInput: "",
pwInput: "",
};
}
goToMain = () => {
this.props.history.push("/hyunjung/main");
};
inputHandler = (e) => {
const { value, name } = e.target;
this.setState({
[name]: value,
});
};
loginButtonDisableHandler = () => {
const { idInput, pwInput } = this.state;
if (idInput.includes("@") && pwInput.length >= 4) return false;
return true;
};
render() {
return (
<div className="Login">
<div className="borderBox">
<div className="imgBox">
<img
alt="westagram text logo"
src="/images/hyunjung/logo_text.png"
className="logo"
/>
</div>
<div className="inputBox">
<input
type="text"
className="loginId"
placeholder="전화번호, 사용자 이름 또는 이메일"
onChange={this.inputHandler}
name="idInput"
/>
<input
type="password"
className="loginPw"
placeholder="비밀번호"
onChange={this.inputHandler}
name="pwInput"
/>
</div>
<button
className="loginBtn"
onClick={this.goToMain}
disabled={ }
>
로그인
</button>
<button className="findPw">비밀번호를 잊으셨나요?</button>
</div>
</div>
);
}
}
export default withRouter(Login);
위 코드를 짜다가 맞이했던 궁금증이었다.
button 의 disabled를 관리해주기 위해 loginButtonDisableHandler라는 함수를 작성했는데, disabled={this.loginButtonDisableHandler}로 작성했을 때 엄창난 에러를 돌려줬다.
disabled를 사용할 수 없다는 것이었다 tada-
웨ㅔㅔㅔ 안돼ㅐㅐㅐ
하면서 열심히 뚝딱거린 결과 this.loginButtonDisableHandler() 로 작성하니 또 잘 된다. 흠. 대체 무엇이 문제인가. 뚝딱뚝딱.
추측컨데 함수의 실행 순간과 관련이 있는 것 같다..
onClick, onKeyUP 등의 이벤트와 관련된 함수의 경우, 이벤트가 발생될 경우 함수를 호출해 결과를 받아오지만, disalbed 의 경우에는 이벤트와 관련되지 않고 언제나 상태가 유지되어야하는 특성, 차이가 있었다.
따라서 이벤트 핸들러의 경우 이벤트가 발생될 경우만 실행이 되어야하니 this.eventHandler 로 불러와도 되는거였지만, disabled와 같은 경우는 this.eventHandler() 로 작성해 컴포넌트의 jsx가 랜더되는 동시에 함수가 실행되도록 해야했던 것이다.
this.loginButtonDisableHandler로 작성했을 경우, 함수의 실행 결과값이 아닌 함수 자체가 disabled에 담겨있었기 때문에, 계속해서 disabled의 value값이 맞지 않으니 수정하라는 오류메세지가 빠밤 하고 뜬 것이다. 라고 생각한다.
: 그 외
내가 하려던 방법 외에도 button의 disabled가 state를 바라보게 하는 방법도 찾을 수 있었고, 함수 내부에 있는 조건을 변수로 설정해서 변수조건과 맞으면 false, 아니면 true를 반환하게 하는 방법도 있었다.
Author And Source
이 문제에 관하여(React this.function vs this.function( )), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunnysideup0w0/React-this.function-vs-this.function저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)