[React] State와 props, 회원가입 정보 받기(input)

 

State와 Props

 

 

- 부모로부터 받는 props 값이 바뀌면 리렌더링이 발생함 

 

 

 

- + 버튼을 눌렀는데 OFF 가 함께 출력됨 

- 부모 컴포넌트가 리렌더링됐기 때문에 자식도 함께 리렌더링이 발생함

 

 

리렌더링이 되는 순간

1. 자신이 관리하는 state의 값이  변동

2. props 의 값이 변경

3. 부모 컴포넌트가 리렌더링 

 

 

 

이런 불필요한 리렌더링은 성능을 악화시킴

-> 관련 없는 컴포넌트를 한번에 몰아두지 않고 분리함

 

 

 

전체 코드 한번 보기...

 

 

Bulb.jsx

Counter.jsx 로 파일 나누기

 

파일 위에 useState

export default

 

App.jsx 에서는 import

 

 

 

State로 사용자 입력 관리하기

회원가입 만들기

 

input 값에 접근하기

1. input값 만들기

2. useState를 사용해 name, setName 만들기 

3. 변화를 감지하는 onChange 넣기

4. 변화를 감지했을 때 작동할 onChangeName 만들기

 

 

 

- target.value 안에 입력 값이 저장되어 있는 걸 확인할 수 있음

- e.target.value를 입력하면 사용자가 입력한 곳에 바로 접근할 수 있음

 

 

 

input값 출력하기

1. console

 

- e.target.value를 콘솔에 출력

 

 

2. 화면

import { useState } from "react"

const Register = () => {

  const [name, setName] = useState("")

  const onChangeName = (e) => {
    setName(e.target.value)
  }
  return (
  <div>
    <input onChange={onChangeName} placeholder={"이름"} />
    {name}
  </div>
  )
}


export default Register

 

 

 

- setName을 통해 저장하면 {name}을 출력했을 때 input 값이 뜨는 것을 확인할 수 있음

 

 

초기값 설정

- useState(" ") 안에 초기값으로 쓸 값 입력하기

- input 안에 value={name} 입력하기

import { useState } from "react"

const Register = () => {

  const [name, setName] = useState("초기값")

  const onChangeName = (e) => {
    setName(e.target.value)
  }
  return (
  <div>
    <input value = {name}
    onChange={onChangeName} 
    placeholder={"이름"} />
  </div>
  )
}


export default Register

 

 

생년월일 만들기

 

import { useState } from "react"

const Register = () => {

  const [name, setName] = useState("초기값")

  const [birth, setBirth] = useState("")

  const onChangeName = (e) => {
    setName(e.target.value)
  }

  const onChangeBirth = (e) => {
    setBirth(e.target.value)
  }
  return (
    <div>
      <div>
        <input value = {name}
        onChange={onChangeName} 
        placeholder={"이름"} />
      </div>
      <div>
        <input 
        value = {birth}
        onChange={onChangeBirth}
        type="date" 
        />
        {birth}
      </div>

    </div>
  )
}


export default Register

 

- 모두 똑같고 type을 date로 설정하면 됨

 

 

 

국적 받기

1. <selcet> 와 <option>을 이용해 select box 만들기

2. country 정의하기

3. onChange 연결하기

4. option에 각각 value 값을 줄 수 있음

  - 일반적으로 사용자에게 보여지는 값은 친절하고 자세하게 적고

  - 내부에서 보는 value 값은 간결하게 쓰는 경우가 많음

 

import { useState } from "react"

const Register = () => {

  const [name, setName] = useState("초기값")

  const [birth, setBirth] = useState("")

  const [country, setCountry] = useState("")


  const onChangeName = (e) => {
    setName(e.target.value)
  }

  const onChangeBirth = (e) => {
    setBirth(e.target.value)
  }

  const onChangeCountry = (e) => {
    setCountry(e.target.value)
  }

  return (
    <div>
      <div>
        <input value = {name}
        onChange={onChangeName} 
        placeholder={"이름"} />
      </div>
      <div>
        <input 
        value = {birth}
        onChange={onChangeBirth}
        type="date" 
        />
        {birth}
      </div> 
      <div>
        <select onChange={onChangeCountry} value={country}>
          {/* 맨 위에 있는 값이 초기값 */}
          <option value=""></option>  
          <option value="kr">한국</option>
          <option value="uk">영국</option>
          <option value="us">미국</option>
        </select>
        {country}
      </div>

    </div>
  )
}


export default Register

 

 

 

자기소개

- textarea 사용

import { useState } from "react"

const Register = () => {

  const [name, setName] = useState("초기값")

  const [birth, setBirth] = useState("")

  const [country, setCountry] = useState("")

  const [bio, setBio] = useState("")

  const onChangeName = (e) => {
    setName(e.target.value)
  }

  const onChangeBirth = (e) => {
    setBirth(e.target.value)
  }

  const onChangeCountry = (e) => {
    setCountry(e.target.value)
  }

  const onChangeBio = (e) => {
    setBio(e.target.value)
  }

  return (
    <div>
      <div>
        <input value = {name}
        onChange={onChangeName} 
        placeholder={"이름"} />
      </div>
      <div>
        <input 
        value = {birth}
        onChange={onChangeBirth}
        type="date" 
        />
        {birth}
      </div> 
      <div>
        <select onChange={onChangeCountry} value={country}>
          {/* 맨 위에 있는 값이 초기값 */}
          <option></option>  
          <option value="kr">한국</option>
          <option>영국</option>
          <option>미국</option>
        </select>
        {country}
      </div>
      <div>
        <textarea 
        onChange={onChangeBio}
        value = {bio}></textarea>
        {bio}
      </div>
    </div>
  )
}


export default Register