[React 완벽 가이드] section 4 : 리액트 State 및 이벤트 다루기

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

48. 모듈 소개

• User Interaction & State, Making Apps Interactive & Reactive
• Handking Events
• Updating the UI & Working with "State"
• A Closer Look At Components & State

49. 이벤트 리스닝 및 이벤트 핸들러 수행하기 

• how to add an event listner to a React element

  <button onClick={() => {console.log("Clicked!!")}}>Change Title</button>

• ()를 제외하고 clickHandler 를 넣어줘야 한다. 만약 ()를 함께 명시할 경우, JavaScript would execute this when this line of code is being parsed. So it is then not executing clickHandler when the click occurs but when this JSX code is evaluated. and that would be too early. 

  // function clickHandler() {}
  
  const clickHandler = () => {
    console.log("Clicked!!!")
  }
  
  
  <button onClick={clickHandler}>Change Title</button>  //O
  <button onClick={clickHandler()}>Change Title</button> // X

50.  컴포넌트 기능이 실행되는 방법

• 다음과 같이 코드를 실행하였을 때, clickHandler가 작동하지 않는다. 왜 그럴까? 리액트는 아래와 같은 방식으로 작동하지 않기 때문이다. 리액트가 JSX 코드를 어떻게 전달하여 화면에 불러오는지에 대해 자세히 알아보자. 

const ExpenseItem = (props) => {

  let title = props.title;

  const clickHandler = () => {
    // console.log("Clicked!!!")
    title = 'updatedddd'
    console.log("title", title) // updatedddd
  }

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button onClick={clickHandler}>Change Title</button>
    </Card>
  );
}
export default ExpenseItem;

• 컴포넌트들은 일반적인 함수이고, 그 함수에 대해 유일하게 특별한 점은 JSX 코드를 반환한다는 것이다. 호출할 컴포넌트 코드가 더 이상 남아있지 않을 때까지 JSX 코드를 통과한다. 그리고 DOM 명령어로 번역해서 화면에 보여지는 것들을 렌더링한다. 이게 리액트가 작동하는 방식이다. 
• App Component가 처음에 지정하는 index.js 파일에서 시작된다. 이게 바로 호출되는 첫 번째 컴포넌트 함수이고, 페이지 방문 시 react app이 화면에 로드되면서 벌어지는 일이다. 

👾 문제! 

• 리액트는 절대 반복하지 않는다는 문제가 있다. application이 처음 렌더링 되었을 때 그 모든 과정을 실행하고, 그 이후에는 끝이다.  하지만 사용자들은 화면에 보이는 것을 바로 업데이트 하고 싶어한다. (ex. 버튼이 클릭 되면 텍스트가 변경되는 것 등.. etc) 이를 위해 생겨난 개념이 바로 state 이다. 

51. "State"와 함께 일하기

• "useState" : 리액트 라이브러리에서 제공하는 함수로, 컴포넌트 함수가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수이다. 

import React, {  useState} from 'react';
import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate";
import Card from "../UI/Card";

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

  const clickHandler = () => {
    setTitle("Updated!");
    console.log("title", title)
    // 여전히 전의 props.title 값이 호출되는 이유는, state를 업데이트 하는 함수를 호출했을 때 
    // 사실상 바로 값을 바꾸지 않았기 때문. 대신 이 state의 업데이트를 예약한다. 
    // 아래의 컴포넌트는 다시 호출되어 재 평가가 되기 때문에 화면에서는 업데이트 된 값을 볼 수 있다. 
  }

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button onClick={clickHandler}>Change Title</button>
    </Card>
  );
}
export default ExpenseItem;

• useState는 리액트 훅이라고도 불린다. 모든 훅은 이름이 "use"으로 시작한다
• 최신 자바스크립트의 배열 구조 분해라는 기능을 사용할 수 있다. 즉 useState는 항상 2개의 요소가 있는 배열을 반환한다. 첫 번째 요소는 현재 상태값이고, 두 번째 요소는 이를 업데이트하는 함수이다. 
• state를 업데이트하는 함수를 호출해서 사용하는 이유? 어떤 변수에 새로운 값을 할당하는 것이 아니라, 메모리 어딘가에서 리액트로 관리된다. 

52.  "useState" 훅 자세히 살펴보기

• state는 컴포넌트의 인스턴스별로 나뉘어져 있다. 
• const 상수형을 사용하는 이유? 기억해야 할 것은 등호를 사용해서 값을 할당하지 않는다는 것이다. 대신 state를 업데이트 하는 함수를 호출하고, 구체적인 값은 리액트에 의해 어딘가에서 관리된다.  따라서 const 를 사용해도 괜찮다. 
• useState를 사용해서 state를 등록하면 항상 2개의 요소를 얻는데, 이는 state value와 이를 업데이트 하는 function 이다. 그리고 state가 변할 때마다 update function을 호출한다. JSX코드에서는 이를 출력하기 위해 첫번째 요소를 사용한다. 리액트는 상태가 변할때마다 컴포넌트형 function을 다시 실행하고 JSX를 re-evaluate 한다. 

53. State는 여러가지 방법으로 업데이트 될 수 있다. 

• user event 뿐만 아니라 어떤 이유로든 상태를 업데이트 할 수 있다. (ex. 타이머가 만료되어 상태 업데이트하기 등 etc..)

54. 양식 입력 추가하기

• NewExpense 컴포넌트 추가 

55.  사용자 입력 리스닝 (listening)

• Since we passed this function to react basically, CRUD is on change prop, react we'll make sure or actually even the browser itself will make sure that we get such a event object when this change event occurs.

  // document.getElementById('').addEventListener('click', (event) => { }) 전통적인 javascript

  const titleChangeHandler = (event) => {
    console.log("event", event.target.value);
  };

56. 여러 State 다루기

• By the way, I'm storing strings all the time and not a number here for the amount, for example, because by default, whenever you listen to the change event for an input, if you read the value of that input element, it'll always be a string. Even if it stores a number it will be a number as a string and the same for the date.

  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };

  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };

  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };

57. State 대신 사용하기 

• 3개의 독립적인 state가 아니라 한 개의 state로 관리할 수 있다. 이 state를 업데이트 할 때마다 1개가 아니라 3개 프로퍼티 모두를 업데이트 해야 한다. 따라서 나머지 2개의 프로퍼티를 잃어버리지 않도록 확인해야 한다. 리액트에서 state를 업데이트할 때는 이전 state와 병합하지 않기 때문이다. 단순히 예전 state를 새 state로 대체한다. 따라서 업데이트 하지 않는 다른 값들은 수동으로 복사해야 한다. 

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

  const titleChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredTitle: event.target.value,
    });
  };

  const amountChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredAmount: event.target.value,
    });
  };

  const dateChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredDate: event.target.value,
    });
  };

👾 문제! 

• One thing is not fine though, And that is how I update my state here. When I also consider my oldest state for copying in values.

58. 이전 State에 의존하는 State 업데이트 

• 아래의 두 방법은 모두 괜찮지만, 이론적으로 동시에 수많은 state update를 계획한다면 오래되었거나 잘못된 state snapshot에 의존할 수도 있다. 하지만 두번째 접근 방법을 사용하면, 리액트는 이 안에 있는 함수에서 이 state snapshot이 가장 최신의  state snapshot라는 것을 보장할 수 있다. 따라서 항상 최신 상태의 snapshot에서 작업하도록 하는 조금 더 안전한 방법이다. 

  const titleChangeHandler = (event) => {
    // setUserInput({
    //   ...userInput,
    //   enteredTitle: event.target.value,
    // });

    setUserInput((prevState) => {
      return { ...prevState, enteredTitle: event.target.value };
    });
  };

59.  양식 제출 처리

• 입력 타입이 submit 일 경우, submit event 를 사용할 수 있다.
• 버튼을 클릭하면 페이지가 다시 로드 될 것이다. 브라우저는 form이 제출될 때마다 이 웹페이지를 호스팅하고 있는 서버에 요청을 보내기 때문이다. 따라서 이 기본 동작을 event.preventDefault() 를 통해 비활성화할 수 있다. 

  const submitHandler = (event) => {
    event.preventDefault();
    console.log("submit");

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

    console.log("expenseDate", expenseDate);
  };
  
  
  return (
  	<form onSubmit={submitHandler}> ...
  )

60.  양방향 바인딩 추가

• Two-way binding is very useful when you're working with forms because it allows you to gather user input, but then also change it.

61. 자식 대 부모 컴포넌트 통신(상향식)

• 데이터를 상위 컴포넌트로 전달하는 방법

62. State 끌어올리기

• NewExpense 컴포넌트는 우리가 전달하는 데이터를 생성하는 컴포넌트가 아니고, 대신 ExpenseForm 컴포넌트에서 데이터를 생성한다. State로 작업하고 사용자 입력을 가져와서 저장하는 컴포넌트이다. 그리고 이 컴포넌트는 불러온 데이터를 NewExpense 컴포넌트에 전달한다. 
• 항상 루트 App 컴포넌트까지 상태를 끌어올려야 하는 것은 아니다. 대신 컴포넌트 tree에서 필요한 만큼 끌어올리는데 데이터를 생성하는 컴포넌트와 데이터가 필요한 컴포넌트에 접근할 수 있으면 된다. 

63. 연습하기 : 이벤트 및 state 작업하기 

• 강의 확인

64. 연습하기 : 이벤트 및 state 작업하기 (answer)

• 강의 확인 

65. 제어된 컴포넌트와 제어되지 않은 컴포넌트 및 Stateless 컴포넌트와 Stateful 컴포넌트

• state가 무엇인지
• 이벤트를 다루는 방법
• 자식에서 부모 컴포넌트로 데이터 전달하는 방법

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

  const clickHandler = () => {
    console.log("title", title);
  };

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button onClick={clickHandler}>Change Title</button>
    </Card>
  );
};
export default ExpenseItem;

// after
const ExpenseItem = (props) => {
  return (
    <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>
  );
};
export default ExpenseItem;

66. 모듈 리소스 

• 강의 확인 

---

https://www.udemy.com/course/best-react/