✨ React 정리 - 5) Input활용, 이벤트버블링(Event Bubbling) ✨

✔️ Input을 활용하기

1. Input 이벤트 핸들러

onChange : 요소에 입력된 값이 변경될 때 실행하는 함수
onInput : 요소에 값을 입력할 때 실행하는 함수
onMouseOver : 요소에 마우스를 위치시켰을 때 실행하는 함수
onScroll : 요소를 스크롤했을 때 실행하는 함수
... 다양한 이벤트 핸들러가 있다

function App() {  
  return (
     <div className="main">
    	<input onChange={() => {실행할 코드}}/>
		<input onInput={() => {실행할 코드}}/>
		<input onMouseOver={() => {실행할 코드}}/>
		<input onScroll={() => {실행할 코드}}/>
		...
     </div>
    );
}

2. Input 입력한 값 가져오기

e.target : 현재 이벤트가 발생하는 요소
e.target.value : 현재 이벤트가 발생하는 요소의 값

e.preventDefault() : 이벤트 동작 방지
e.stopPropagation() : 이벤트 버블링 방지

function App() {  
  return (
     <div className="main">
    	<input onChange = { (e) => { console.log(e.target.value) }}/> // input값에 값이 변경될때 마다 값을 console에 출력
     </div>
    );
}

3. Input 입력한 값 저장하기

사용자가 input에 입력한 데이터는 state나 변수에 저장해서 사용하는 것이 일반적이다

function App() {  
  return (
     let [inputVal, setInputVal] = useState('');
  
     <div className="main">
    	<input onChange = {(e) => { 
          setInputVal(e.target.value)
          console.log(inputVal) }}/>
     </div>
    );
}

4. Input을 활용한 글 발행 기능과 삭제 기능

주의할점

1. 기존 state는 최대한 변경하지 않도록 한다. (재 수정 용이)
2. state를 변경할 때 배열에 어디를 변경할 지 생각한다.
3. Component 안에 retunr () 안에는 최상위 부모 태그만 리턴 해야 하기 때문에 병렬 구조를 사용하려면 Fragment를 사용한다

state 선언
사용할 state를 선언한다

const [title, titleChange] = useState([
    '남자 스타일링 추천',
    '강남 우동 맛집',
    '리액트 독학',
]);
const [date] = useState([
  '11월 28일',
  '12월 1일',
  '12월 19일',
  '12월 20일'
]);
let [inputVal, setInputVal] = useState('');

component 선언
긴 코드를 방지하기 위하여 component를 선언한다

function List(props) {
  return (
    <div className="list">
      <h4
        onClick={() => {
          console.log(props.title[props.index]);
          props.setModalTitle(props.index);
        }}
      >
        {props.title[props.index]}
      </h4>
      <p>{'날짜: ' + props.date[props.index]}</p>
    </div>
  );
}

글 추가 & 삭제 기능
input에 값을 입력하고 button을 클릭하게되면 최종으로 입력된 값을 state에 저장하여 사용한다. 이 때 배열은 원본을 최대한 해치지 않게 하기 위해 복사 Array를 생성하여 사용한다.

{title.map((x, i) => {
        return (
          <>
            <List key={i} title={title} index={i} date={date}></List>
            <button
              onClick={() => {
                let copyTitle = [...title]; // 글 제목 복사 배열
                copyTitle.splice(i, 1); // 해당하는 요소 삭제하고 배열 재 반환
                titleChange(copyTitle); // 변경함수 사용하여 state 변경
              }}
            >
              삭제
            </button>
          </>
        );
      })}
      <input
        onInput={(e) => {
          setInputVal(e.target.value);
        }}
      ></input>
      <button
        onClick={() => {
          let copyTitle = [...title]; // 글제목 복사 배열 선언
          copyTitle.unshift(inputVal); // 글제목 복사 배열에 가장 앞에 값 input에서 입력된 값 추가
          titleChange(copyTitle); // 변경함수를 사용하여 state 변경
        }}
      >
        생성버튼
      </button>

최종코드

function App() {
  const [title, titleChange] = useState([
    '남자 스타일링 추천',
    '강남 우동 맛집',
    '리액트 독학',
  ]);
  const [date] = useState(['11월 28일', '12월 1일', '12월 19일', '12월 20일']);
  let [inputVal, setInputVal] = useState('');

  return (
    <div>
      {title.map((x, i) => {
        return (
          <>
            <List key={i} title={title} index={i} date={date}></List>
            <button
              onClick={() => {
                let copyTitle = [...title];
                copyTitle.splice(i, 1);
                titleChange(copyTitle);
              }}
            >
              삭제
            </button>
          </>
        );
      })}
      <input
        onInput={(e) => {
          setInputVal(e.target.value);
          console.log(inputVal);
        }}
      ></input>
      <button
        onClick={() => {
          let copyTitle = [...title];
          copyTitle.unshift(inputVal);
          titleChange(copyTitle);
        }}
      >
        생성버튼
      </button>
    </div>
  );
}

function List(props) {
  return (
    <div className="list">
      <h4
        onClick={() => {
          console.log(props.title[props.index]);
          props.setModalTitle(props.index);
        }}
      >
        {props.title[props.index]}
      </h4>
      <p>{'날짜: ' + props.date[props.index]}</p>
    </div>
  );
}

---

✔️ 이벤트 버블링(Event Bubbling)

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작

1. e.stopPropagation()

상위 html로 퍼지는 이벤트 버블링을 방지

function App() {  
  return (
     <div
    	className="main"
    	onClick={
    		(e) => { console.log(e.target) }
		} // 2. 해당 div에 이벤트가 발생해도 자식의 이벤트가 동작하지 않는다.
	 >
    	<input
			onChange={
              (e) => { e.stopPropagation(); // 1. 이 코드를 추가 함으로
                      console.log(e.target.value); }
			}/> // input값에 값이 변경될때 마다 값을 console에 출력
     </div>
    );
}

2. event.stopImmediatePropagation()

버블링과 할당된 다른 핸들러의 동작을 동시에 중단 시키는 메서드

function App() {  
  return (
     <div
    	className="main"
    	onClick={
    		(event) => { console.log(event.target) }
		} // 
	 >
    	<input
			onChange={
              (event) => { event.stopImmediatePropagation();
                      console.log(e.target.value); }
			}/>
     </div>
    );
}