[React] React 완벽 가이드 섹션 4 : 리액트 state 및 이벤트 다루기

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy

---

1. 이벤트 핸들러 작성(클릭 시 이벤트)

const clickHandler = () => {
    console.log("Clicked!");     // 클릭 시 실행되는 함수 작성
};

return(
	<button onClick={clickHandler}> Change! </Button>  // clickHandler() xxx
);

⭐ 함수를 호출할 때 이름만 작성해야한다. 함수 뒤에 괄호를 붙이면 jsx 코드가 리턴될 때 함수가 실행된다.

 

 

2. State !  ⭐⭐⭐⭐⭐

- state를 사용하기 위해선 react의 useState를 가져와야 한다.

import React, {useState} from "react";

 

1) state 사용 방법

- 컴포넌트 함수 내에서만 사용가능 

const [state, setState] = useState("초기값"); 
// 첫번째 인자는 현재 상태 값, 두번째 인자는 그 값을 업데이트 해주는 함수

- 배열구조분해할당을 이용하여 useState함수는 실행 후 배열을 반환하므로 

useState("초기값")[0] = state, useState("초기값")[1] = setState 임을 알 수 있다. 

 

const ExpenseItem = (props) =>{
  const [title, setTitle] = useState(props.title); 

  const clickHandler = () => {
    setTitle('Updated!'); // 함수가 실행되면 컴포넌트가 다시 렌더링됨
  };

  return (
    <li>
      <Card className="expense-item">
        <ExpenseDate date={props.date} />
        <div className="expense-item__description">
          <h2>{props.title}</h2>
          <div className="expense-item__price">{props.amount}</div>
        </div>
      </Card>
    </li>
  );
}

- 컴포넌트 인스턴스 기반 단위기 때문에 컴포넌트 마다 상태가 존재하며 그 것은 독립적이다.

 

2) 사용자가 입력한 값을 받아오기

const [enteredTitle, setenteredTitle] = useState(''); 
const titleChangeHandler = (event) => {
    setenteredTitle(event.target.value); //입력된 값이 state에 "문자열"로 저장된다. 
};

<input type='text' onChange={titleChangeHandler} />

 

- state를 다른 방식으로 선언이 가능하다.

const [userInput, setUserInput] = useState({
  enteredTitle : '',
  enteredAmount : '',
  enteredDate : ''
});

const titleChangeHandler = (event) => {
    setUserInput({
      ...userInput, 
      enteredTitle: event.target.value 
      // title만 업데이트한다고 다른 값들 같이 안쓰면 다른 값들은 사라진다.
      // 따라서 ...userInput을 꼭! 써줘야됨
    });
};

 

- 또다른 방법

const titleChangeHandler = (event) => {
    // setUserInput는 리액트에 의해 자동으로 실행된다.
    setUserInput((prevState) => { 
      return { ...prevState, enteredTitle: event.target.value};
    }); 
    //이전 상태에 기반한다면 이걸 사용
};

👉 이전 상태에 따라 상태가 업데이트 될 때 위와 같이 작성을 해줘야 한다.

 

 

3. 양식제출처리

<form onSubmit={submitHandler}>
   ...
   <button type="submit">Add Expense</button>
</form>

form을 작성해줬으면 제출했을 때 실행될 함수를 작성해준다.

 

const submitHandler = (event) => {
    event.preventDefault(); // 버튼 클릭하면 화면이 리로드 되므로 막아준다.
    const expenseData = {
      title : enteredTitle,
      amount : enteredAmount,
      date : new Date(enteredDate)
    }

    // 값을 저장했으면 초기화 시켜준다.
    props.onSaveExpenseData();
    setenteredTitle('');  // input에서 value속성을 {enteredTitle}로 지정해줘야 한다.
    setenteredAmount('');
    setenteredDate('');
  }

 

 

4. 자식대 부모 컴포넌트 통신(상향식) - 상태 끌어올리기

- 지금까지 props를 부모가 자식에게 props값을 주는 방식이었지만 함수를 이용해 상향식도 가능하다.

 

1) 부모 컴포넌트에서 함수를 정의한다.

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

2) 부모의 컴포넌트 리턴문에서 자식컴포넌트의 props를 설정한다.

return (
    <div className="new-expense">
        <ExpenseForm //자식 컴포넌트
          onSaveExpenseData={saveExpenseDataHandler}
        />
    </div>
);

3) 자식 컴포넌트에서 props를 받아온다.

const submitHandler = (event) => {
    event.preventDefault();
    const expenseData = {
      title : enteredTitle,
      amount : +enteredAmount,
      date : new Date(enteredDate)
    }

    props.onSaveExpenseData(expenseData); // 함수 호출
	...
}

그러면 부모컴포넌트에서 자식컴포넌트에서 저장된 배열을 가져올 수 있다.

 

 

5. 컴포넌트 종류

- 컴포넌트는 상태저장을 위해 존재할 수도있고, 아니면 단순히 값을 출력하는 용도로 사용가능하다.