TIL

React 기록

이해보단 일단 사용법부터....

---

1. 이벤트를 줄때는 DOM과는 달리 camelCase로 입력한다.

onChange, onClick

2. 메서드 안에서 this값을 받으려면 메서드 뒤에 .bind(this)만 붙여주면 된다.

test해본 결과

1번 방법 : 에러뜸.

 Change(e) {
    this.setState({
      newcontent : e.target.value
    })
  }.bind(this)

2번 방법 : 굳굳

constructor(props){
    super(props)
    this.change = this.change.bind(this)
}
 change(e) {
    this.setState({
      newcontent : e.target.value
    })
  }

3번 방법 : 참신하다

 Change = (e) => {
    this.setState({
      newcontent : e.target.value
    })
  }

2번방법처럼 constructor안에서 bind(this)를 적용시켜주니 잘 된다. 1번방법은 왜 안되는지 잘 모르겠다 ㅠㅠ

3. state의 값을 바꾸려면 state가 아닌 setState()로 바꿔야한다.

class Test extends Component{
  constructor(props){
    super(props)
    this.state = {
      user : 'yong'
      }
  }
  change() {
    this.setState(() => {
      return { 
	user : 'yongyong'
      }
  })  

4. props나 state가 바뀌면 화면이 다시 그려진다.

이벤트등으로 props나 state가 변경되면 화면에 리랜덩링 된다.

---

add.

yyyy-mm-dd 형식으로 날짜값 받기

console.log(new Date()) // Thu Mar 25 2021 01:37:19 GMT+0900 (대한민국 표준시)

console.log(new Date().toISOString()) // '2021-03-24T16:37:19.111Z'

console.log(new Date().toISOString().slice(0,10)) //  '2021-03-24'

new Date로 현재 날짜를 받고,toISOString()으로 '-'형식의 날짜를 받은 후, slice로 9번째 자리까지만 출력 하면 2011-10-05가 된다!

아마 더 좋은 방법이 있겠지? 하지만 이 방법도 있다는 것을 기록!