React Hook(1)

Event Handling

• JSX: onClick = {실행될 함수}

state

• 컴포넌트 안에서 관리되는 유동적인 데이터

import React from 'react'
const [value, setValue] = React.useState('');

useRef

• ref를 넘겨주면 해당 dom element를 current에 담아준다.
  -- 필요하다면 ref를 어디서든 사용 가능하다(선언으로 가능하다면 지양할 것!)
• ref의 input과 state의 value 를 따로 관리하가 때문에 실시간으로 바뀌는 input value값에 대한 처리가 불편하다. uncontrolled input

const input = React.useRef(null);
<input type="text" ref={input} />

useRef 예시

//input에 값을 입력하면 입력한 값이 출력되는 코드
//버튼으로 입력값 reset
const App = () => {
 const input = React.useRef(null);
 const [value, setValue] = React.useState('');
 const handleClick = () => {
 setValue('');  // Q) setValue('')가 누락되면 생기는 bug
 if (input.current) { // Q) if가 누락되면 생기는 bug
 input.current.value = '';
 }
 }
 return (
 <div>
 현재 value는 {value}입니다.
 <input type="text" ref={input} onChange={(e) => setValue(e.target.value)} />
 <button type="button" onClick={handleClick}>Click to Reset</button>
 </div>
 );
}

Q)setValue('')가 누락되면 생기는 bug & if가 누락되면 생기는 bug

• input value와 setValue는 따로 관리되기에 둘 다 리셋을 해주어야 한다.

controlled input

• react state에 value를 input에 넣어서 값을 맞춘다

const [valueA, setValue] = React.useState('');
const handleClick = () => {
 setValue('');
 
<input type="text" value={valueA} onChange={(e) => setValue(e.target.value)} />

uncontrlled input

• 값이 따로 관리되면 controlled input을 사용하면 되지 왜 uncontrolled input을 사용할까?

• 데이터를 입력하면 정보가 React에서 별도 처리할 필요 없이 엘리먼트에 반영되지만 특정 값을 갖도록 강제할 수 없다.