문제

풀이

if 문을 확인해보면 id가 admin이면 풀린다.
쿼리를보면 guest가 기본으로 들어가 있기 때문에

no절을 포함한 앞을 false로 만들고 이후 절에 id='admin'을 넣어야 한다.

하지만 No Quotes~ 를 보면 정규식으로 '를 제한한다.

이를 우회하기 위해 서브쿼리로 숫자 -> 문자로 치환한다.

?no=2 or id=(select concat(char(97), char(100), char(109), char(105), char(110)))

no는 1일 때 guest가 참이었으므로 2로 변경하여 False로 반환

id가 admin인 것을 찾기 위해 서브쿼리 생성

concat을 사용하여 변환된 아스키 코드를 연결

char를 사용하여 입력받은 숫자 아스키를 알파벳으로 변경

리액트 교과서 Chapter07(React에서 폼 다루기)

제어 컴포넌트

onChange를 사용하여 event의 value를 setState로 상태 변경

class HelloWorld extends React.Component {
  constructor(prop) {
    super(prop)
    this.state = {
      userName: '',
      userNum: ''
    }
    this.changeUserName = this.changeUserName.bind(this)
    this.changeUserNum = this.changeUserNum.bind(this)
    this.submitBtn = this.submitBtn.bind(this)
  }

  changeUserName (event) {
    this.setState({
      userName: event.target.value
    })
  }

  changeUserNum (event) {
    let newVal = event.target.value.replace(/[^0-9]/ig, '')

    this.setState({
      userNum: newVal
    })
  }

  submitBtn (event) {
    console.log(this.state)
  }

  render() {
    return (
      <div>
        <input value={this.state.userName} onChange={this.changeUserName} ></input>
        <br></br>
        <input value={this.state.userNum} onChange={this.changeUserNum} ></input>
        <br></br>
        <button onClick={this.submitBtn}>submit</button>
      </div>
    )
  }
}

리스트의 Object 변경

class RadioComp extends React.Component {
  constructor(prop) {
    super(prop)
    this.state = {
      checkboxGroup:[
        {
          item: 'node',
          checked : false
        },
        {
          item: 'react',
          checked : false
        },
        {
          item: 'express',
          checked : false
        },
        {
          item: 'mongoDb',
          checked : false
        }
      ] 
    }
    this.changeRadio = this.changeRadio.bind(this)
  }

  changeRadio (event) {
    console.log(event)
    // 값중 일부를 변경하기 위해 객채를 복제
    let obj = Object.assign(this.state.checkboxGroup)

    // 모든 체크를 비활성화
    obj.forEach(element => {
      element.checked = false
    });

    // 입력받은 값만 checked를 true로 변경
    let idx = obj.findIndex((element, index, array) => element.item === event.target.value)
    obj[idx] = {item: event.target.value, checked: event.target.checked}

    // checkboxGroup를 변경
    this.setState({
      checkboxGroup: obj
    })
  }

  render() {
    return (
      <div>
        {
          this.state.checkboxGroup.map((checkbox, index) => {
            return (
              <div key={index}>
                <label>{checkbox.item}</label>
                <input type="radio" value={checkbox.item} checked={checkbox.checked} onChange={this.changeRadio} ></input>
              </div>
            )
          })

        }
        <button  onClick={this.submitBtn}>submit</button>
      </div>
    )
  }
}

https://github.com/Kmmanki/react_note/tree/master/chapter07

리액트 교과서 Chapter06(React에서 이벤트 다루기)

이벤트 등록을 하는 방법

함수에 현재 컴포넌트를 bind 해주어야한다.
해당 바인드를 하지 않는 경우는 아래와 같다.

• 함수에서 Component 인스턴스를 사용하지 않을 때
• Arrow 함수를 사용 할 때

class HelloWorld extends React.Component {
  constructor(prop) {
    super(prop)
    this.state = {
      count : 0
    }
    // 바인드 방식 1
    this.minusBtn = this.minusBtn.bind(this)
  }
  plusBtn (event) {
    this.setState({
      count: ++this.state.count
    })
  }
  minusBtn (event) {
    this.setState({
      count: --this.state.count
    })
  }
  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        // 바인드 방식 2
        <button onClick={this.plusBtn.bind(this)} >+</button>
        <button onClick={this.minusBtn} >-</button>
        <button onClick={(event) => {
          this.setState({
            count: 0
          })
          }} >clear</button>
      </div>
    )
  }
}

합성이벤트

minusBtn (event)함수에서 event가 합성이벤트이다.
event는 표준화를 위한 React 객체다.
내부 프로퍼티 및 함수는 아래와 같다.

• currentTarget: 이벤트를 캡쳐한 요소의 DOMEventTarget(대상 요소 및 부모요소)
• target: DOMEventTarget가 발생한 요소
• preventDefault(): 링크 나 폼 전송 등 기본 동작을 방지하는 메소드
• isDefaultPrevented(): 기본동작이 방지 되었을 때 True를 반환
• stopPropagation(): 이벤트 전파 중단
• isPropagationStopped: 이벤트 전파가 중단되었다면 true 반환
• type: 태그명 문자열
• persist(): 합성 이벤트를 이벤트 풀에서 꺼낸 후 사용자 코드에서 이벤트에 대한 참조를 유지할 수 있도록 한다.
• isPersistent(): 합성 이벤트를 이벤트 풀에서 꺼낸경우 true를 반환

입력이 된 텍스트 상자의 value를 가져오는 방법

...

getNameInputValue(event) {

console.log(e.target.value)

}

...

컴포넌트간 통신

컴포넌트간 데이터의 변경을 주고 받아야 한다면 부모 컴포넌트에서 상태를 관리하고 하위에는 변경에 대한 메소드
변경된 값들을 전달하는 것이 좋은 패턴이다.

1. parent -> content로 상태 전달
2. parent -> btn으로 함수전달
3. btn -> parent 함수 호출
4. parent -> content 변경된 상태 전달

class Parent extends React.Component {
  constructor(prop) {
    super(prop)
    this.state = {
      counter: 0
    }
  }
  updateCounter(e) {
    console.log('wow')
    this.setState({counter : ++this.state.counter})
  }
  render() {
    return <div>
      <ChildContent counter={this.state.counter}></ChildContent>
      <ChildBtn updateCounter={this.updateCounter.bind(this)}></ChildBtn>
    </div>
  }
}
class ChildContent extends React.Component {

  render() {
    return <span>{this.props.counter}</span>
  }
}
class ChildBtn extends React.Component {
  render() {
    console.log(this.props)
    return <button onClick={this.props.updateCounter}>+</button>
  }
}

React가 지원하지 않는 이벤트 처리

resize 이벤트는 React에서 지원하지 않는다.
이를 해결하기 위해 라이프 사이클 메소드를 사용한다.

// 동작하지 않음
return <div onResize={this.handleResize}></div>

동작

1. window에 이벤트 리스너 등록
2. 화면의 크기가 변동되면 상태 갱신
3. 상태 갱신으로 인한 동적 style 갱신

class Radio extends React.Component {
  constructor(prop) {
    super(prop)
    this.handleResize = this.handleResize.bind(this)
    let i = 1
    this.state = {
      outerStyle: this.getStyle(4, i),
      innerStyle: this.getStyle(1, i),
      selectedStyle: this.getStyle(2, i),
      taggerStyle: {top: 20, width: 25, height: 25}
    }
  }
  getStyle (i, m){
    let value = i * m
    return { top: value, bottom: value, left: value, right: value}
  }
  
  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }
  handleResize() {
    let w = 1+ Math.round(window.innerWidth / 300)
    this.setState({
      taggerStyle: {top: w*10, width : w*10, height: w*10 },
      textStyle: {left: w*13, fontSize: 7*w}
    })
  }

  render() {
    return <div>
      <div className="radio-tagger" style={this.state.taggerStyle}>
        <input type="radio" name={this.props.name} id={this.props.id} />
        <label htmlFor={this.props.id}>
            <div className="radio-text" style={this.state.textStyle}>{this.props.label}</div>
            <div className="radio-outer" style={this.state.outerStyle}>
              <div className="radio-inner" style={this.state.innerStyle}>
                <div className="radio-selected" style={this.state.selectedStyle}></div>
              </div>
            </div>
        </label>
      </div>
    </div>
  }
}

리액트 교과서 chapter05
(React 컴포넌트의 라이프사이클 이벤트)

React는 라이브 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의 할 수 있다.

• 마운팅 이벤트: React 엘리먼트를 DOM노드에 추가할 때 발생
• 갱신이벤트: 속성이나 상태가 변경되어 React 엘리머트를 갱신할 때 발생
• 언마운팅 이벤트 : React 엘리먼트가 DOM에서 제거될 때 발생

마운팅과 언마운팅의 경우 DOM의 추가, 삭제 과정에 동작하므로 1번만 동작하며, 갱신은 상태의 변경에 따라 동작하기 때문에 여러번 동작 될 수 있다.

• contructor: 상태의 초기화 시 사용 된다.
• 마운팅
  • componentWillMount(): DOM에 삽입 전에 실행된다.
  • componentDidMount(): DOM에 삽입 후에 실행된다.
• 갱신
  • componentWillReceiveProps(nextProps): 컴포넌트가 속성을 받기 직전에 실행
  • shoudComponentUpdate(nextProps, nextState): 컴포넌트가 갱신되는 조건을 정의해서 재랜더링을 최적화 할 수 있다. boolean 값을 반환
  • componentWillUpdate(nextProps, nextState): 컴포넌트가 갱신되기 직전에 실행된다.
  • componentDidUpdate(prevProps, prevState): 컴포넌트가 갱신된 후에 실행된다.
• 언마운팅
  • componentWillUnmount(): DOM에서 제거하기 전 실행되며, 구독한 이벤트를 제거하거나 다른 정리작업에 수행 할 수 있다.

라이프 사이클의 사용 및 관찰

class Clock extends React.Component {

  constructor(props) {
    super(props)
    this.launchClock()
    this.state = {
      currentTime : (new Date()).toLocaleString('kr'),
      testState : 'testState',
      counter : 0 
   }
  }

  launchClock() {
    setInterval(() => {
      this.setState({
        currentTime: (new Date()).toLocaleString('kr'),
        counter: ++this.state.counter
      })
    }, 1000)
  }

  render () {
    if (this.state.counter > 2) {
      return <Logger time={this.state.currentTime}></Logger>
    }
    }
}

class Logger extends React.Component {
  constructor (props) {
    super(props)
    console.log('constructor 실행')
  }
  componentWillUnmount() {
    console.log('componentWillUnmount 실행')
  }
  componentDidMount() {
    console.log('componentDidMount 실행')
  }
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps 실행')
    console.log('새로운 속성', nextProps)
  }
  shoudComponentUpdate(nextProps, nextState) {
    console.log('shoudComponentUpdate 실행')
    console.log('새로운 속성', nextProps)
    console.log('새로운 상태', nextState)

  }
  componentWillUpdate(nextProps, nextState){
    console.log('componentWillUpdate 실행')
    console.log('새로운 속성', nextProps)
    console.log('새로운 상태', nextState)
  }
  componentDidUpdate(prevProps, prevState){
    console.log('componentDidUpdate 실행')
    console.log('이전 속성', prevProps)
    console.log('이전 상태', prevState)
  }
  componentWillUnmount(){
    console.log('componentWillUnmount 실행')
  }
  render () {
    return <div>{this.props.time}</div>
  }
} 

componentDidMount의 활용

기본적인 템플릿이 mount 된 뒤 데이터 조회

  class UserList extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        userList : [{id: '1', username:'1'}]
      }
    }
      componentDidMount() {
        this.getUserList()
      }

      getUserList() {
        fetch('https://jsonplaceholder.typicode.com/users/')
        .then((response) => {return response.json()})
        .then((users) => {
          this.setState({userList : users})
        })
      }

      render() {
        return <div>
          <table>
            <tbody>
              {this.state.userList
              .map((user) => 
                <tr key={user.id} id={user.id}>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

      }
  }

https://github.com/Kmmanki/react_note/tree/master/chapter05