[ React ] 리액트 이벤트

📌 이벤트 규칙

이벤트의 이름은 모두 카멜 표기법으로 표현됩니다. ( onkeyup → onKeyUp )

이벤트를 전달할 때에는 { 함수 } 형태로 사용합니다.

 

 

 

📌 input값 핸들링 해보기 

1. input의 값이 변화되는 이벤트(onChange)를 연결합니다.

2. 이벤트 안 첫번째 매개변수에서 event객체를 활용합니다. (e.target.속성값 활용가능)

3. setter 함수를 이용해서 state를 변경합니다

4. value 속성을 이용해서 state동기화 처리합니다. state를 통해 input의 value를 제어하지 않으면 에러가 발생할 수 있습니다.

따라서, input에 value={상태값}을 처리해주어야합니다.

 

⓵ useState를 여러개로 관리하기

let [name, setName] = useState('');
let [comment, setComment] = useState('');


let handleName = (e) => {
	setName(e.target.value); //--- 입력한 값으로 name을 변경합니다.
}

let handleComment = (e) => {
	setComment(e.target.value); //--- 입력한 값으로 comment를 변경합니다.
}

let handleClick = () => {
    alert(`${name}님의 입력값 : ${comment}`);
    setName('');
    setComment('');
}

let handleKeyUp = (e) => {
    if(e.key === 'Enter') { //--- enter를 눌렀을 때
      handleClick(); //---  버튼 클릭 시 실행하는 함수로 연결됩니다.
    }
}


return (
	
    <div>
    	<input type="text" name="name" value={name} onChange={handleName}/>
        <br/>
        결과 name값: {name}
        
        <br/>
        <input type="text" name="comment} value={comment} onChange={handleComment} onKeyUp={handleKeyUp}/>
        <br/>
        결과 comment값: {comment}
        
        <br/>
        <button type="button" onClick={handleClick}>클릭</button>
    </div>
)

 

이렇게 화면이 나오면 성공!

alert창의 확인을 누르고 나면 input값들이 모두 설정해둔 것처럼 초기화됩니다😄

 

📎 useState를 여러개로 관리하는 예제

 

Q. Select 태그가 change될 때 선택한 옵션 값을 아래에 출력하는 코드를 작성하세요 !

 

let [food, setFood] = useState('');

let handleFood = (e) => {
	setFood(e.target.value);
}

return (
	<div>
    	<select value={food} onChange={handleFood}>
                <option>피자</option>
                <option>햄버거</option>
                <option>치킨</option>
        </select>
        <h3>선택한 결과 : {food} </h3>
    </div>
)

 

 

⓶ useState를 1개로 관리하기 (객체로 사용)

  let [form, setForm] = useState({name: '', topic: ''}) //--- 초기값이 객체입니다.

  let handleForm = (e) => {
    //--- ⓵기존값을 복사하고 특정 키(e.target.name -> e.target.value)만 변경합니다.
    //--- ⓶spread operater(...form) : form이 갖고 있는 값을 나열합니다.
    
    let copy = {...form, [e.target.name] : e.target.value}; //--- ⓵,⓶
    setForm(copy);    
  }

  let handleClick = (e) => {
    alert(`${form.name}님의 할 일 ${form.topic}`);
    setForm({name: '', topic: ''}); //--- 값 초기화
  }

  return(
    <div>
      input태그 객체로 핸들링하기
      <br/>

      <input type="text" name="name" value={form.name} onChange={handleForm}/>
      <br/>
      결과name값: {form.name}

      <br/>
      <input type="text" name="topic" value={form.topic} onChange={handleForm}/>
      <br/>
      결과topic값: {form.topic}
      
      <br/>
      <button type="button" onClick={handleClick}>클릭이벤트</button>
    </div>
  )

이런식으로 나오면 성공 ! 😄

 

 

📎 useState를 1개로 관리하는 예제

 

Q. input에 작성하는 값을 추가하기버튼(혹은 엔터기능)을 통해 결과로 보내고 값을 초기화하는 코드를 작성해보세요 !

let [form, setForm] = useState({data: '', result: ''}); //--- 초기값이 객체

let handleChange = (e) => {
	setForm({data: e.target.value, result: form.result});
}

let handleClick = (e) => {
	setForm({data: '', result: form.data}); //--- 입력값 초기화, 결과값에 입력값 주입
}

let handleKeyUp = () => {
	if(e.key === 'Enter') { //--- Enter하면 버튼을 클릭한 함수로 연결
    	handleClick();
    }
}

return (
	<div>
    	<input type="text" value={form.data} onKeyUp={handleKeyUp} onChange={handleChange}/>
        <button type="button" onClick={handleClick}>추가하기</button>
        
        <br/>
        <h3>결과: {form.result}
    </div>
)