React💎

state & event

state

state란 무엇인가?

: component내부에서 정의하는 상태가 state이며, state는 객체 형태를 가진다.
: state를 가질 수 있는건 class 뿐이다.

class 형태의 화면 구조

class Button extends React.Component {
  constructor() {
    super();
    
    this.state = {
      clicked : false //여기서의 this는 Button component로 유지
    }
}
  render () {
    return () {
}

1. 먼저 위에서 부터 봤을때, class 는 constructor()를 제일 먼저 실행시키기 때문에 그 constructor () {} 의 중괄호 공간 안에 먼저 this.state를 통해 component에 필요한 state를 선언한다.

2. this.state는 항상 객체 형태를 유지한다.

3. jsx를 화면에 구현화 하는 부분이 render() {}이다.

React를 통해 event 적용하기

이전에 vanila JavaScript를 사용해서 만들었던, 로그인 버튼 활성화, 댓글 올리기 기능을 react로 구현하고자 한다.

1. 로그인 이벤트 적용하기 🎨✨

• ID값에 @ 를 포함하고 password 길이가 5자리 이상일시, 로그인 버튼을 활성화(연한파랑 👉🏼 진한파랑) 바꾸게 하는 기능을 구현해보자

1. 먼저 필요한 state가 어떤게 있을지 생각하고 this.state 객체에 추가한다. 해당 이벤트의 경우 사용자가 입력할 ID,사용자가 입력할 비밀번호 조건맞을지 확인 할true/false 가 필요할 기능이기때문에 먼저 this.state에 object를 추가해 준다.

this.state = {
  userID = "",
  userPassword = "",
  ready : false 
}

2. 먼저 조건이 성사 되지 않았을 기준으로 시작하기 때문에, 기본값을 false로 저장해주고, userID와 userPassword도 입력 전이기 때문에 ""빈 값 으로 설정해준다.
   
   

3. 적용이 필요한 함수 값 즉, input이 들어가는공간에 <input Onchange = {this.함수이름}> 으로 저장해준다.

<input onChange = {this.idChangeHandler} type="text"  id="username-field" className="login-form-field" placeholder="전화번호, 사용자 이름 또는 이메일"/>
<input onChange = {this.passwordChangeHandler} type="password" id="passwsord-field" className="login-form-field" placeholder="비밀번호"/>

4. 이후 constructer() 와 render() 사이에 구현하고자 하는 함수를 넣어준다.
   
   

5. input 값에 입력된 값을 보고 확인하기 때문에 parameter로 e를 넣어주고,
   this.setState를 통해 해당 event가 일어나면 정해줄 state값을 객체로 표시한다

setState는 비동기 함수이다. 먼저 요청을 해 놓고, 실제 이벤트가 발생했을때 실행 시키는 요소이므로, 각각의this.state했을때의 현 상황으로 이해하면 되며 항상 console.log 찍어보면서 확인하는 과정이 중요하다.

     idChangeHandler = e => {
        this.setState({
          IDInput : e.target.value,
          ready : this.state.passwordInput.length>5 && e.target.value.includes("@") ? true : false
        })
      }
     
     //위의 코드를 보면, idChangeHandler가 실행된 경우 ,
     //id값의 value를 IDInput값으로 저장시키게끔하고 
    //ready객체에서 기존에 요청한 조건이 맞으면 
    //조건?true:false인 삼항연산자를통해 변화할 boolean 값을 정해주었다.  

     passwordChangeHandler = e => {
        this.setState({
          passwordInput : e.target.value,
          ready : e.target.value.length>5 && this.state.IDInput.includes("@") ? true : false
        })
      }
      
      render () {
      //아래 password도 id값과 동일하게 적용해 주었고, 
    //이제 true/false값을 사용해 class값을 toggle시키는 작업을 하면 
   //이 이벤트는 완성된다.

6. Input 값의 className에 삼항연산자 함수를 { }에 넣고 javascript함수는 항상 {}에 넣기 this.state가 ready true이면 class값을 미리 설정해둔 진한 파랑으로, false이면 연한파랑으로 적용되게끔 만들어 준다.

• index.css파일에 두가지 className을 적용해놓으면된다.

<input className= {this.state.ready ? 
                   "ready-to-submit" : "not-ready-to-submit"} 
		onClick = {this.clickHandler} type="submit" value="로그인"/>

2. 메인 댓글 이벤트 적용하기 💬

• 댓글을 게시하면 댓글창에 입력한 값이 올라가게끔 적용해보자

1. 먼저 필요한 state가 어떤게 있을지 생각하고 this.state 객체에 추가한다. 해당 이벤트의 경우 사용자가 입력할 댓글내용,사용자가 입력했다면 입력할 댓글을 표시하고 입력하지 않았다면 빈칸 표시를 나타내 줄 true/false 가 필요할 기능이기때문에 먼저 this.state에 object를 추가해 준다.

        this.state = {
          comment : "",
          clicked : false
        };

2. 아래 적용할 게시 버튼을 눌렀을때 이벤트를 적요해야 하므로 button에 onClick이벤트를, 게시글을 state에 저장할 공간인 textarea에는 onChange 함수를 적용한다.

<textarea onChange = {this.changeHandler} className="comment-field" placeholder="댓글 달기..."></textarea>
<button onClick = {this.clickHandler} className="click-to-post" type="submit">게시</button>

3. constructor () 와 render()사이에 아래 정의한 함수가 호출되면 실행할 함수를 정의한다.
   
   

4. 먼저 댓글value를 comment state로 저장해준다
   
   

5. 클릭 하면 클릭이벤트가 true로 바뀌도록 저장해준다.

      changeHandler = (e) => {
          this.setState ( {comment : e.target.value })
      }
      clickHandler = () => {
          this.setState({clicked : true})
      }

6. 댓글이 추가되어야 할 공간에 빈 div 태그를 만들어 주고 삼항연산자를 통해, 해당 버튼이 클릭되면 안에 comment값을 넣어주고 아니면 빈값을 넣어줘 라고 호출하면 끝!

<div> {this.state.clicked ? "this state.comment : ""} </div>

다음 포스팅에선 React의 lifecyle과 props관련하여 자세히 다룰 것!