React 이벤트 처리

Heidi·2022년 5월 3일

React

목록 보기

3/8

위 그림과 같이 App컴포넌트 안에 Form컴포넌트를 넣어 작업하는 것을 전제로 한다.

이벤트 처리

리액트에서 프론트 화면을 구성할 때 보통 input태그를 활용하며,
submit을 통해 백엔드서버로 보내게 된다.

  <script type="text/babel">

    class Form extends React.Component{
    
      render(){
        return(
          <form>
            내용 : <input type="text" value="" />
            <input type="submit" value="확인" />
          </form>
        )
      }
    }
</script>

state를 활용한 event 처리

state를 사용하면 실시간 검색 등을 구현할 수 있다.
위 제작된 form 내 두가지 이벤트를 생성한다.

1) input

onChange : Form 컴포넌트 state값을 최신화

2) form

onSubmit : 마지막으로 최신화 된 state값을 console.log 출력

3) preventDefalut

페이지 이동을 막기 위해 e.preventDefalut를 사용하였다.

체크하기!
input에 변경된 값을 넣어주기 위해서는 state를 ''로 두는 것이 아니라 setState로 state를 아예 변경해야한다. (매개변수 e에 대해 상태변경 값이 바로 출력된다.)

  <script type="text/babel">

    class Form extends React.Component{

      state = {
        value : "",
      }

      handleChange = (e) => {
          console.log(e.target.value)//상태 value값이 아님 input의 value값임

          this.setState({
          ...this.state,
          value : e.target.value 
        })
      }

      handleSubmit = (e) => {
        e.preventDefault()
        console.log(this.state.value)
      }

      render(){
        // const {state:{value}} = this

        return(
          <form onSubmit={this.handleSubmit}>
            내용 : <input type="text" value={this.state.value}  onChange={this.handleChange}/>
            //변경된 값 넣어줘야한다!!!!! 안그럼 이벤트는 발생하는데 받아오지 못한다.
            <input type="submit" value="확인" />
            <h3>{this.state.value}</h3>
          </form>
        )
      }
    }
</script>

결과물은 다음과 같이 나온다.

props를 통한 작업

혹, 부모 컴포넌트에서 자식컴포넌트에게 값을 보내 출력하고 싶은 경우 props를 활용한다.
지면상 간단하게 표시한다

<script>

    class App extends React.Component {
      render(){
        return(
          <div>
            <Form color = {"red"}/>
          </div>
        )
      }
    }


</script>

Form 컴포넌트에 {this.props.color} 값만 넣어주면 원하는대로 출력된다.

리액트 디버깅에 좋은 확장 프로그램

react deverper tools을 설치하면 컴포넌트 간 공유, 상속되는 props, state 값을 조회할 수 있다.

리액트의 단점과 끌어올리기

리액트는 부모-자식 컴포넌트 간 값을 공유할 수 있지만,
같은 부모컴포넌트를 둔 또다른 형제 컴포넌트 간 값의 공유는 불가능하다.

따라서, 변경상태를 공유하기 위해서는
부모컴포넌트가 자식컴포넌트에서 값을 끌어올려서 반영한 후 다시 자식컴포넌트들에게 보내야 한다.

~~몹시 불편하지만 나중에 쉽게(?!) 값을 공유할 수 있는 리덕스라는 친구가 나온다.~~

Parent Component에서

<script>

  class App extends React.Component {

    state ={
      value : "",
    }

    changeValue = (v) => {
      this.setState ({
        ...this.state,
        value : v
      })
    }

    render(){
      return(
        <div>
          <Form vlaue ={this.state.value} change={this.changeValue}/>
          <Value vlaue={this.state.value} />  
        </div>
      )
    }
  }
  
</script>

app 의 value={this.state.value}를 통해 자식컴포넌트에 state를 전달
setState는 부모 컴포넌트에서 자식 컴포넌트의 상태를 바꿀 수 있는
함수 change라는 props를 보냈다.

Childern Component에서

<script>

    class Form extends React.Component{

      handleChange = (e) => {
        const {target:{value}} = e
        this.props.change(value)
        //부모 컴포넌트가 보낸 함수가 props 들어오면 그것을 change값으로 변경함
      }

      handleSubmit = (e) => {
        e.preventDefault()
      }

      render(){
        const {props:{
          value
        },
        handleChange,
        handleSubmit
        } = this

        return(
          <form onSubmit={handleSubmit}>
            내용 : <input type="text" value={value}  onChange={handleChange}/>
            <input type="submit" value="확인" />
          </form>
        )
      }
    }


</script>

자식컴포넌트는 부모로부터 받은 함수가 props로 들어오면 그것을 change값으로 변경하게 되는데, 자식에 의해 부모 컴포넌트가 변경된 값이 반영되면 그 값을 또 다른 컴포넌트로 공유할 수 있게 된다.
참고로 부모로부터 state값을 props로 받아오기 때문에 form의 state는 필요없어졌다.

other children Component로

<script>
  
    class Value extends React.Component {
      render(){
        return(
          <div>
            <h1>{this.props.value}</h1>
          </div>
        )
      }
    }
</script>

형제컴포넌트 value를 만들어 조회하였을때 역시 app의 state값을 props로 받아 값이 변경된 것을 확인할 수 있다.

확장프로그램을 통한 확인

확장프로그램으로 조회하면 자식 컴포넌트는 부모로부터 props를 받으므로 props의 값이 변경되는 대신 스스로의 state는 변경되지 않는다.
반면 부모 컴포넌트는 본인의 state의 값이 변경되는 것을 확인할 수 있다.

State의 위치

혹시?

그렇다면, 부모와 자식/형제 컴포넌트들에 값을 더욱 편하게 옮기기 위해서는
최상단 컴포넌트에 state를 작성하는 것이 좋은 것이 아닐까?

그렇지 않다!
변경단위 값이 최상위 컴포넌트에 있다면 전체가 재랜더링 되므로불필요한 부담과 속도지연이 생긴다.
결국 적정선에서 설계하는 것이 중요하다.
(사실 이후 리덕스 사용하면 신경쓰지 않아도 되는 문제이긴 하다)

> 끌어올리기 이미지 참고 https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818