[react] DeepDive 3 리액트 User Interaction & State

User Interaction & State

 

리액트 상태관리 [리액트 hook]

리액트 훅으로 상태관리하기!!

 

react에서 상태(state) 관리는 매우 중요하다

리액트 훅 (use로 시작함) ex) useState, useRef, useSelector...등등

useState 

함수 컴포넌트에서 상태를 추가하고 업데이트할 수 있는 기능 (자주 바뀌는 값을 설정할 때 주로 사용)

import React, {useState} from "react";

구조 분해 할당

useState를 사용하면 배열의 첫 번째 요소로 현재 상태값을 받아오고,

두 번째 요소로는 해당 상태값을 업데이트할 수 있는 함수를 받아옵니다.

 cosnt[title, setTitle] = useState(props.title);

=> title은 props.title임

  const clickHandler = () => {
    setTitle;
    ("Updated!");
    console.log(title);
  };

 

이벤트리스너

태그안에 프로퍼티로 이벤트리스너( on으로 시작함 )를 정의할수 있다

 const clickHandler=()=> {
    console.log('Clicked!!');
  }
  
<button onClick={clickHandler}>Change Title</button>

 const titleChangeHandler = (e) => {
    console.log(e.target.value);
  };

 

target이 input으로 되어있는 것을 볼수 있음!

=> 우리가 수신하고 있는 요소에 이벤트가 발생한 현재 입력되어 있는 값을 얻을 수 있음!!!

 

리액트 상태관리 [props]

컴포넌트에서 props로 데이터를 전달할 수 있는데,
props는 부모에서 자식으로만 전달이 가능하다!!!

=> 중간 컴포넌트를 건너 뛸 수 없음

 

상태올리기( 자식컴포넌트 => 부모컴포넌트 : 상향식 데이터 통신 )

함수 포인터를 사용하면 상향식으로 데이터가 통신이 가능하다!!

onSaveExpenseData={saveExpenseDataHandler}

const NewExpense = () => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    console.log(expenseData);
  };

  return (
    <div className="new-expense">
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
};
export default NewExpense;

 

=>saveExpenseDataHandler 함수가 어떤 데이터를 저장하는 로직을 가지고 있다고 가정해 보자.

그리고 이 함수를 자식 컴포넌트로 전달하면, 자식 컴포넌트에서 이 함수를 호출하여 부모 컴포넌트에 데이터를 전달하거나 상태를 업데이트 할 수 있다

 

ExpenseForm.js

 const submitHandler = (e) => {
    e.preventDefault();

    const expenseDate = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

    console.log(expenseDate, "데이터 요기있네");
    props.onSaveExpenseData(expenseDate);
    setEnteredTitle("");
    setEnteredAmount("");
    setEnteredDate("");
  };

 

이렇게 함수 포인터를 사용하면

자식에서 부모컴포넌트로 props를 이용해서 데이터를 전달할 수 있다!!

부모 컴포넌트에 정의된 함수를 전달받음

=> 함수호출은 자식에서만 함