Controlled Component

Controlled Component

• 데이터를 React Component에서 관리
• input, textarea, select 등의 HTML요소는 기본적으로 자체적인 state를 가지지만 React Component에서 완전히 통제하는 방식

import { useCallback, useState } from "react";

export default function InputSample(){
  
  const [inputs, setInputs] = useState({
    name:'',
    nickname:''
  });
  
  const {name, nickname} = inputs


  const onChange = useCallback((e:React.ChangeEvent<HTMLInputElement>)=>{    

    const {name, value} = e.target

    setInputs(prev=>({
      ...prev,
      [name]:value 
    }))
  },[])
  
  return (
    <form>
      <input placeholder="이름"  name="name" value={name} onChange={onChange}/>
      <input placeholder="닉네임" name="nickname" value={nickname} onChange={onChange}/>
      <div>
        <b>값 : </b>
        {name} - {nickname}
      </div>
    </form>
  )
}

Uncontrolled Component

• DOM요소의 자체적인 state 관리 기능을 사용하고 필요할때 값을 참조만하는 방식

import { useCallback, useRef } from "react";

export default function UnControlledInput(){
  
  //React.LegacyRef<HTMLInputElement>
  const nameInput = useRef<HTMLInputElement>(null);
  const nicknameInput = useRef<HTMLInputElement>(null);

  const onClick = useCallback((e:React.MouseEvent<HTMLButtonElement>)=>{
    e.preventDefault()
    const name = nameInput.current?.value
    const nickname = nicknameInput.current?.value

    console.log(name)
    console.log(nickname)
  },[])
  return (
    <form>
      <input         
        ref={nameInput}        
        />
      <input         
        ref={nicknameInput}/>
      <div>
        <b>값 : </b>
      </div>
      <button onClick={onClick}>button</button>
    </form>
  )
}