React 💎

state와 event 보충

State

React jsx의 색 변경하는 방법🎨

<div style = {{color : "blue"}}>

• 중괄호 두개 , 원하는 css 스타일 적용

• inline스타일은 유지 보수할때 좋지 않고, 최대한 지양해야 한다.

• inline style로 적용하는 color 값은 항상 ""안에 감싼다.

  
  

state에서 정의한 컬러 적용✨

	this.state = {
    	color : "white"
    }
  <div style = {{color : this.state.color}}>

React에서 이벤트 입력하는 방법

changeHandler () => {
 this.setState ({color : "blue"})
}
<input onChange={this.changeHandler}>

1. 항상 console.log 제대로 걸리는지 확인하기

   
   

Toggle 기능 구현 하기🤙🏼🤙🏼

1. Toggle 기능을 구현하려면 이 값 아니면 저 값 이어야 하니, boolean 값이 적합하다.
2. 먼저 this.state를 사용해서 기존 colorState :true로 기본 값을 셋팅하고

    this.state = {
      colorState: true,
      }

3. 색 변경을 해줘야 하는 형태로 접근해 아래 처럼 바꾸어 주도록 한다.

    <div style={{ color: this.state.colorState ? "blue" : "red" }}>

Instagram 댓글기능 state 사용하여 구현하기 게시 클릭 눌렀을때와 게시 enter눌렀을때 기능 가능하게 하기🤹

1. 먼저 작성된 댓글을 저장할 state 에 빈 배열 과 빈 ""string을 만들어 준다.

     this.state = {
          comments : [],
          comment : ""
        }

2. 댓글이 적힐 textarea에 this.onChange함수를 걸어주고 onChange함수에 키값이 들어오면 그 value를 this.setState를 통해 변경되도록 만들어 준다.

    changeHandler = (e)  =>{
        // e.preventDefault();

          this.setState ({comment : e.target.value})  
        //   if (e.keycode === 13) {
        //     console.log("Dd")
        } 
 
<textarea onChange = {this.changeHandler} onKeyUp={this.handleKeyPress} className="comment-field" placeholder="댓글 달기..."></textarea>

3. 이후게시버튼을 눌렀을때 작성된 값이 댓글로 보여질수 있도록 Onclick함수를 입력해준다.

<button onClick = {this.clickHandler} className="click-to-post" type="submit">게시</button>

4. clickHander 함수를 통해, comment값을 comments 배열에 push하고 그값을 setState를 통해 변경 해주는 코드를입력한다.

   clickHandler = () =>  {
        let comments = this.state.comments
        let comment = this.state.comment
        comments.push(comment)
        this.setState({comments : comments})
      }

5. 이제 댓글이 입력해야하는 부분에 map 함수를 사용하여 배열에 각각 comment인자를 주고, 해당 코멘트를 출력해내는 코드를 입력하여 { } 안에 지정해주면 끄읕!

{this.state.comments.map ((comment) => {
  return ( <span><b>joanne_jhk</b> {comment} </span> ) } ) }

6. 게시 버튼 클릭 뿐만 아니라 "Enter" 키 클릭으로도 업로드가 되게 하려면? 텍스트 입력시 일어나는 event 를 잡아내야 함으로 text area에 onKeyUp 에 handleKeyPress method를 입력한다

<textarea onChange = {this.changeHandler} onKeyUp={this.handleKeyPress} className="comment-field" placeholder="댓글 달기..."></textarea>

7. 이후 입력된 값의 keyCode가 13일 시 ('Enter' 키의 keyCode는 13이다)

   handleKeyPress = (e) => {
        e.keyCode === 13 && this.clickHandler()
      }

8. && 를 사용하여 '항상 true일때 이거해'라는 true or false 값에 사용할 수 있다.

   
   

여기까지 state 와 event를 활용한 이벤트구현을 해보았는데, 이제 props와 다른 기능을 더 배워서 더 다양한 이벤틀르 써보고 싶다🙌🏼🙌🏼