리액트 교과서 chapter04(React 컴포넌트의 상태)

React 컴포넌트의 상태

현재까지는 props를 사용하여 뷰를 갱신하였다. 하지만 pros(속성)은 컴포넌트의 생성시에 전달 받는 값이기 때문에 변경을 감지하여 뷰를 갱신 할수 없다.

React 컴포넌트의 상태를 이용하여 이러한 문제를 해결 할수 있다. 상태(state)는 컴포넌트에 데이터를 저장하고 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심 개념이다.

초기 상태(state) 설정

class Clock extends React.Component {
  constructor(props) {
    super(props)
    // 초기상태 세팅
    this.state = {currentTime : (new Date()).toLocaleString('') }
  }
  ...
}

상태(state)의 사용

...
render () {
    return <span >Current Time is : {this.state.currentTime}... </span>  
    }

상태(state)의 변경

setState를 사용하지 않은변경은 적용되지 않는 안티패턴이다.
setState에 포함된 데이터만 변경된다. 즉 testState는 변경되지 않는다.

class Clock extends React.Component {

  constructor(props) {
    super(props)
    this.launchClock()
    // 두 state를 초기화
    this.state = {
      currentTime : (new Date()).toLocaleString('kr'),
      testState : 'testState'
   }
  }

  launchClock() {
    // 1초마다 state의 currentTime를 갱신
    setInterval(() => {
      console.log('updating time...')
      this.setState({
        // currentTime state만 변경
        currentTime: (new Date()).toLocaleString('kr') 
      })
    }, 1000)
  }

  render () {
    return <div className="block">
      // setState를 통해 상태변경
      <span className="block">{this.state.testState}</span>
      <span className="block">Current Time is : {this.state.currentTime}... </span>  
    </div>
    }
}

상태 객체와 속성

상태 객체와 속성은 모두 클래스의 멤버이며 각각 this.state, this.props를 말한다.
차이점

1. 상태 객체는 변경이 가능하지만 속성은 변경이 불가능하다.
2. props는 부모 컴포넌트로 부터 전달하지만, 상태 객체는 해당 컴포넌트가 정의한다.

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

React 교과서 chapter03(JSX)

JSX

챕터2 까지의 Element 생성은 React의 createElement 함수에 각각의 인자를 넣는 방식으로 개발을 하였다.
해당 Element가 적고 복잡하지 않다면 크게 문제가 없지만 복잡해질 수록 가독성이 떨어진다는 단점이 있다.
이를 보안하기 위한 것이 JSX이다.
JSX는 기존의 HTML태그를 사용하는것과 매우 유사하다.

JSX 방식

class HelloWorld extends React.Component {
  render() {
    return (
      <h1>hello world</h1>
    )
  }
}

const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  React.createElement(HelloWorld, null)
)

JSX의 설치

1. npm init: pagkage.json 생성
2. package.json에 babel 추가:
   "barbel": {
   "presets": [
   "@babel/preset-env",
   "@babel/preset-react"
   ]
   },
3. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react: 설치

JSX의 컴파일

.\node_modules.bin\babel .\jsx -o .\js\script-compield.js
jsx 디렉토리의 모든 파일을 js디렉토리의 script-compield.js로 변환

.\node_modules.bin\babel .\jsx -o .\js\script-compield.js -w
-w 옵션은 해당 파일의 변경을 감지하여 자동 빌드

index.html 소스 수정

<script src="./js//script-compield.js" type="text/javascript">

JSX의 변수의 출력

class DateTimeNow extends React.Component {
  render () {
    let dateTimeNow = new Date().toLocaleTimeString()
    return <span>Current Time is : {dateTimeNow}... </span>
  }
}

JSX의 속성 사용

class Profile extends React.Component {
  render () {
    return <a href={this.props.url}>{this.props.userName}</a>
  }
}


const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  <div>
    <HelloWorld></HelloWorld>
    <DateTimeNow></DateTimeNow>
    <Profile url="http://www.naver.com" userName="김만기"></Profile>
  </div>
)

JSX의 메소드 사용

class Profile2 extends React.Component {
  getUrl() {
    return 'http://www.naver.com'
  }
  render () {
    return <a className="block" href={this.getUrl()}>{this.props.userName}</a>
  }
}

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

게시판 목록

user ID가 다른 글을 읽으면 목록 페이지에서 alert

Request, Response 분석

게시판 읽기의 분석 결과 추가적인 js를 발견하지 못함

하지만 게시판의 update에서 게시판 id를 임의로 전달 한 결과  exit 처리가 안되어 있음

게시판 접속

글쓰기 버튼이 없는 것을 확인 

관리자의 아이디가 admin인 것을 확인

게시글이 작성된 것을 확인

Request, Response 분석

분석 결과 주석 처리된 버튼이나 js를 발견 할 수 없었음

Guessing 공격

notice_read.php: 글 읽기

notice_list.php: 글 목록

notice_????.php: 글 ???

notice_write.php : 글 작성?