[SeSAC Front-end] [React] state & event 기초 실습하기

Harimad·2022년 11월 30일
1

React

목록 보기
3/18
post-thumbnail

🌱Intro

  • 이번 시간에는 React에서 state와 event를 실습할 수 있는 문제를 풀어보도록 하겠습니다.
  • React에서 변수를 저장할 때 useState를 이용해서 저장하고, state값을 바꿔주는 함수를 이용해서 state값을 바꾸는 방식을 살펴보겠습니다.
  • 부모 컴포넌트에서 자식 컴포넌트로 값(props)을 넘겨주는 것도 보겠습니다.
  • onClick, onChange와 같은 이벤트를 React에서 어떻게 사용하는지 실습을 통해서 알아보겠습니다.

🌱본론

문제 1

문제 1 - 풀이 코드

  • 버튼 클릭 횟수를 저장하기 위한 state값 만들어 줍니다.
  • 클릭이라는 버튼을 눌렀을 때 state값이 증가하도록 만드는 countUp 함수를 만들었습니다.
  • setCount 함수 안에있는 count 인자는 state의 현재 값이 들어갑니다.
  • 버튼안에 마우스가 들어왔다가 나가는 순간 mouseout이벤트가 발생합니다. 이때는 count값이 0으로 초기화 되도록 onMouseOut 이벤트에 콜백함수를 넣어줍니다.
import React, { useState } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  const countUp = () => {
    setCount(count => count + 1)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={countUp} onMouseOut={() => setCount(0)}>
        클릭
      </button>
    </div>
  )
}

export default App

문제 2

문제 2 - 풀이 코드

  • 초기에 문제에서 제시한 state를 작성해 줍니다.
  • input 태그 안에서 Change 이벤트가 발생했을 때 message 값이 바뀌도록 inputHandler함수를 실행하도록 합니다.
  • 버튼을 클릭했을 때 message.title 값을 화면에 보여주도록 clickHandler 함수를 실행하도록 합니다.
import React, { useState } from 'react'

const App = () => {
  const [message, setMessage] = useState({ title: '제목', color: 'red' })

  const inputHandler = e => {
    let copy = { ...message, title: e.target.value }
    setMessage(copy)
  }

  const clickHandler = e => {
    alert(message.title)
  }

  return (
    <div>
      <h1 style={message.title !== '제목' ? { color: message.color } : null}>
        {message.title}
      </h1>
      <hr></hr>
      <input
        type="text"
        placeholder="내용을 입력하세요"
        onChange={inputHandler}
      ></input>
      <button onClick={clickHandler}>클릭</button>
    </div>
  )
}

export default App

문제 3

  • App 컴포넌트에서 info라는 state를 만듭니다. 이 state는 서버에 저장된 아이디 비밀번호라고 가정합니다.
  • inputInfo라는 state를 만듭니다. Id 와 Pw라는 자식 컴포넌트에서 이 inputInfo라는 state값을 입력하도록 합니다.
  • infoHandler라는 함수를 만드는데 이 함수는 inputInfo의 값을 바꾸는 기능을 합니다.
  • infoHandler 함수를 Id, Pw 컴포넌트의 props로 내려줍니다.
  • Id, Pw 컴포넌트에서 input을 입력합니다.
  • 버튼을 클릭하면 info의 값과 inputInfo의 값을 비교해서 값이 같으면 '로그인 성공'이라는 메시지를 브라우저에 보여줍니다.

문제 3 - 풀이 코드

import React, { useState } from 'react'

const Id = props => {
  return (
    <div>
      <label htmlFor="userId">PW : </label>
      <input
        type="text"
        id="userId"
        name="id"
        onChange={props.infoHandler}
      ></input>
    </div>
  )
}

const Pw = props => {
  return (
    <div>
      <label htmlFor="userPw">PW : </label>
      <input
        type="text"
        id="userPw"
        name="pw"
        onChange={props.infoHandler}
      ></input>
    </div>
  )
}

const App = () => {
  const [info, setInfo] = useState({ id: 'Lee', pw: '1234' })
  const [inputInfo, setInputInfo] = useState({ id: '', pw: '' })

  const infoHandler = e => {
    setInputInfo(prev => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

  const checkInfo = () => {
    let isTrue = true
    for (const key in inputInfo) {
      if (info[key] !== inputInfo[key]) {
        isTrue = false
      }
    }
    if (isTrue) {
      alert('로그인 성공')
    } else {
      alert('로그인 실패')
    }
  }

  return (
    <div>
      <Id infoHandler={infoHandler}></Id>
      <Pw infoHandler={infoHandler}></Pw>
      <button onClick={checkInfo}>Login</button>
    </div>
  )
}

export default App

문제 4

문제 4 - 풀이 코드(option 이용)

  • regions라는 state에 배열값을 초기값으로 설정합니다.
  • select태그에 change 이벤트가 발생했을 때 value 값을 저장할 수 있는 select 라는 state를 만듭니다.
  • 그리고 changeHandler라는 함수를 onChange 이벤트에 넣어줍니다.
  • 버튼을 클릭했을 때 select 라는 state에 저장된 값이 브라우저에 보이게 됩니다.
import React, { useState } from 'react'

const App = () => {
  const [regions, setRegions] = useState([
    { kor: '서울', eng: 'Seoul' },
    { kor: '부산', eng: 'Busan' },
    { kor: '제주', eng: 'Jeju' },
  ])
  const [select, setSelect] = useState('')

  const changeHandler = e => {
    setSelect(e.target.value)
  }

  return (
    <div>
      <h1>라디오 버튼의 value를 출력</h1>
      <select onChange={changeHandler}>
        {regions.map(region => (
          <option key={region.eng} value={region.eng}>
            {region.kor}
          </option>
        ))}
      </select>
      <button onClick={() => alert(select)}>확인</button>
    </div>
  )
}

export default App

문제 5

문제 5 - 풀이 코드

  • App 컴포넌트에서 CheckBox 컴포넌트에게 cap, shoes, bag 라는 props를 내려줍니다.
  • CheckBox 컴포넌트에서 props로 받은 값을 구조분해할당으로 변수를 만들어 줍니다.
  • total이라는 state에 초기값을 0으로 설정합니다.
  • map을 돌리기 위해서 items라는 state를 만들고, 초기값으로 배열을 줍니다.
  • input checkbox 태그에 onChange 이벤트가 발생했을 때 changeHandler 함수가 실행되도록 합니다.
  • changeHandler 함수는 checkbox가 checked 되었을 때 total 값이 변경되는 기능을 가지고 있습니다.
import React, { useState } from 'react'

const CheckBox = props => {
  const { cap, shoes, bag } = props
  const [total, setTotal] = useState(0)
  const [items, setItems] = useState([
    { value: cap, text: '모자 1만원' },
    { value: shoes, text: '신발 3만원' },
    { value: bag, text: '가방 8만원' },
  ])

  const changeHandler = checkbox => {
    if (checkbox.checked) {
      setTotal(total => total + parseInt(checkbox.value))
    } else {
      setTotal(total => total - parseInt(checkbox.value))
    }
  }

  return (
    <div>
      <p>{total}</p>
      {items.map((item, idx) => (
        <div key={`${item}${idx}`}>
          <input
            type="checkbox"
            value={item.value}
            onChange={e => changeHandler(e.target)}
            id={`chk${idx}`}
          ></input>
          <label htmlFor={`chk${idx}`}>{item.text}</label>
        </div>
      ))}
    </div>
  )
}

const App = () => {
  return (
    <div>
      <CheckBox cap={10000} shoes={30000} bag={80000}></CheckBox>
    </div>
  )
}

export default App

🌱나가면서

  • 지금까지 React에서 state를 설정하고, 자식 컴포넌트로 props를 내려주는 방식을 살펴보았습니다.
  • onClick이나 onChange 이벤트가 발생했을 때 원하는 함수가 호출되도록 만들 수 있습니다.
  • map() 메서드를 이용해서 반복되는 코드를 줄일 수 있습니다.
  • 추가적으로 state관련해서 알고싶다면 아래 참고 사항에 기재된 링크를 참고해 주시길 바랍니다.

🌱참고


'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅'
profile
Here and Now. 🧗‍♂️

0개의 댓글