Assignment
- 로그인 버튼 눌렀을 떄, 사용자가 입력한 id와 pw 가 콘솔에 나올 수 있게 해주세요.
- 사용자가 입력한 id와 pw가 기준(id- '@'포함/ pw-5글자 이상)에 맞는 경우에만 로그인 버튼 색상이 활성화 될 수 있도록 해주세요.
- 메인 페이지 : 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭시 댓글이 추가되도록 구현.
1. 입력한 id와 pw가 콘솔에 나오게.
<생략>
class Login extends Component {
constructor() {
super()
this.state = {
id: "",
pw: "",
backColor: ""
}
}
consoleID = (event) => {
this.setState({
id: event.target.value
}//, () => console.log(this.state)
)
}
consolePW =(event) => {
this.setState({
pw: event.target.value
})
}
showValue =() => {
console.log("id : ",this.state.id, "pw : ", this.state.pw)
this.props.history.push('/main')
}
render(){
return(
<중략>
// console에 id 보이기
<input className = "id" type="text"
placeholder= "전화번호, 사용자 이름 또는 이메일"
onChange={this.consoleID} />
//console에 pw 보이기
<input className= "password" type="password"
placeholder="비밀번호"
onChange={this.consolePW} />
// 메인페이지로 넘어가기
<button className= {this.state.id.length > 5
&& this.state.pw.length > 5 ? "button active" : "button inactive"}
type ='button' this.state.pw > 5 ? "blue" : "red"}}
onClick={this.showValue}>로그인</button>
<생략>console에 입력한 id와 pw의 값을 보이기 위해선 값을 저장해야 한다.(?)
리액트(JSX)에선 페이지의 변화되는 부분. 변화가 일어나는 부분을 state에 저장한다.
id와 pw의 경우, 입력하는 값에 따라 값이 변하기 때문에 이를 state에 저장한다.
그러나 리액트(JSX)에선 초기 설정된 state 값을(constructor()에 의해) 직접적으로 변화시킬 수 없다.
이를 변화시키기 위한 방법으로는 함수를 설정하고. 함수이 호출되었을 때, 그 함수에 포함되어 있는 setState를 통해 변화시킬 수 있다.
consoleID 와 consolePW 모두 호출되었을 때 setState를 통해 해당 state(id와 pw)의 값을 변경시켜주었다. 여기서 주의할 점은 초기 설정된 state의 값이 비어있다는 점.
자바스크립트의 object에서 키의 값을 재할당?하는 느낌으로??!!
두번째로 주의해야 할 점은, 함수가 호출되는 위치이다.
위의 코드에선 input 태그에 위치해있다. 자바스크립트에선 볼 수 없었던 onChange라는 속성이 있다. 이는 이전의 addEventListener 와 같은 역할을 한다.
여기서는, 해당 input 태그에서 change(변화)가 생겼을 때. 즉 값이 입력되었을 때 함수가 발동한다는 뜻이다.
onChange={this.함수이름} // 태그안에 변화가 있을 때(주로 키입력)
onClick={this.함수이름} // 태그를 클릭할 때(주로 버튼)
여기서 this란 해당 컴포넌트(여기선 Login)의 내부에서 선언된 함수라는 말이다.
점접근? 그걸로 함수에 접근한다고 보면 될 듯. console.log() 같은거임. Math. 이런거
아무튼 이렇게. 해당 함수가 호출되면 setState를 통해 state에 새로운 값이 설정되는데.
그 값은 event.target.value 즉, 해당 이벤트가 일어나는 위치의 값이다.
여기까지하면 state에는 새로운 값이 저장되었고, 이제는 이를 console에 나타내는 방법이 필요하다.
문제는 로그인 버튼을 눌렀을 때 보여져야하는 것.
마찬가지로 로그인 버튼에 함수를 위치시켰다. 그리고 onClick={this.showValue}로
클릭을 했을 때 함수 showValue를 호출한다.
showValue =() => {
console.log("id : ",this.state.id, "pw : ", this.state.pw)
this.props.history.push('/main')
}this.props.history.... 부분은 넘어가고.
console.log에 id와 pw의 state값을 보여달라고 명령한다.
그러나 이 state의 값은 다음과 같이 표현하고 있다.
this.state.스테이트의 이름 // id 또는 pw 또는 원하는대로 지정한거
함수를 호출했을 때와 마찬가지로, this.state 이 컴포넌트의 state에 state 이름을 적어 해당 state 값을 가지고 왔다. object다. object에서 값을 가지고 올 때 하는 방식과 같다.
아무튼 이렇게 해서, 로그인 버튼을 누르면 페이지는 넘어가고 console에 원하는 값을 보여준다.
2. 로그인 버튼 색 바꾸기
<button className= {this.state.id.length > 5 &&
this.state.pw.length > 5 ? "button active" : "button inactive"}
onClick={this.showValue}>로그인</button>하나의 태그가 무식하게 길다.
위의 태그에는 삼항 연산자가 들어갔다.
조건문? a : b // 조건문이 참이면 a, 아니면 b
코드의 조건은 state id와 pw의 길이 값이 5이상인가라는 것이다.
그리고 그 조건이 맞다면 "button active", 틀렸다면 "button inactive" 이다.
조건의 결과가 무엇이든 간에, 이것이 뜻하는 건 결국 className 값이다.
그러므로 그 결과에 따라 className의 값이 바뀌고.
css 를 통해 그 해당 값에 대한 원하는 결과(여기선 버튼 컬러)를 바꿔주면 된다.
주의해야할점은 css 를 scss로 작성하며. 그 className의 스타일이 button(과) active라는 것이다. button의 스타일을 받으면서 active 스타일을 받기위해서, 이렇게 작성하였다.
주로 이런 방법을 사용한다고 하지만 다른 방법도 있다. 바로 태그의 인라인으로 스타일을 결정하는 것이다.
<button
style={{backgroundColor: this.state.id > 5
&& this.state.pw > 5 ? "blue" : "red"}}> // 이런느낌컴퓨터는 위에서 아래로 읽는다. 컴포넌트를 선언하고, state 값을 설정하고, 함수를 설정하고, JSX 들이 나온다. 근데 차례대로 작성한 것은 아니다. JSX에 함수를 위치시키고 해당 함수를 정의하였다. 처음부터 들어갈 함수 생각하면서 작성하는 사람은 진짜..
아무튼 줄줄 글을 쓰긴 했는데 코드를 써보면서 함수 실행의 순서나 위치. 변하는 것은 state값. 이런 것들이 중요한 것 같다.
그러하다..
