리액트 핵심, useState를 사용하는 다양한 방법

리액트 핵심 1 .

만약 변화하는 데이터를 가지고 있는데 그 변화하는 데이터가 사용자 인터페이스에 반영되어야 한다면 state가 필요하다.

왜냐면 일반적인 변수는 수행하지 않지만 state를 사용하면 값을 설정하고 변경할 수 있기 때문이다.

그리고 state가 바뀌면 리액트는 그 state가 등록된 컴포넌트를 재평가할 것이다.

그리고 다른 컴포넌트는 빼고 그 컴포넌트만 재평가할 것이다. state가 등록된 그 컴포넌트만!!

 

리액트 핵심 2 .

리액트는 컴포넌트 별 인스턴스를 기반으로 해서 독립적인 state를 갖는다. 

 

---

1. 가장 일반적은 useState 사용법

const ExpenseForm = () => {
  const [enteredTitle, setEnteredTtile] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');
  
  const titleChangeHandler = (e) => {
    setEnteredTitle(event.target.value);
  }
  const amountChangeHandler = (e) => {
    setEnteredAmount(event.target.value);
  }
  const dateChangeHandler = (e) => {
    setEnteredDate(event.target.value);
  }
  
}

 

 

2. 독립적인 state가 아니라 한 개의 state처럼 관리하는 방법

const ExpenseForm = () => {
 const [userInput, setUserInput]= useState({
    enteredTitle:'',
    enteredAmount:'',
    enteredDate:''
  })
 const titleChangeHandler = (e) => {
    setUserInput({...userInput,enteredTitle : event.target.value});
  }
 const amountChangeHandler = (e) => {
    setUserInput({...userInput,enteredAmount : event.target.value});
  }
 const dateChangeHandler = (e) => {
    setUserInput({...userInput,enteredDate : event.target.value});
  }
 }

 

👉   3개의 독립적인 state가 아니라 한 개의 state처럼 관리할 수 있다. 
일반적인 방법과의 차이점 :state를 업데이트할 때마다 한 개가 아니라 이 세 프로퍼티 모두를 업데이트 해야한다는 점!!

 

 

만약 하나씩 증가하는 카운터를 관리하고 있다면 상태를 업데이트할 때마다 위 식처럼 쓰면 안된다. 상태를 업데이트하는 함수를 위한 대체 폼을 사용해야한다. 👇👇

 

3. 독립적인 state가 아니라 한 개의 state처럼 관리하는데, 상태 업데이트가 이전 상태에 의존하고 있으면 이 함수 폼 사용하기

const ExpenseForm = () => {
 const [userInput, setUserInput]= useState({
    enteredTitle:'',
    enteredAmount:'',
    enteredDate:''
  })
 const titleChangeHandler = (e) => {
    setUserInput((prevState) => {
      return {...prevState, enteredTitle : event.target.value}
    });
  }
 const amountChangeHandler = (e) => {
    setUserInput((prevState) => {
      return {...prevState, enteredAmount : event.target.value}
    });
  }
 const dateChangeHandler = (e) => {
    setUserInput((prevState) => {
      return {...prevState, enteredDate : event.target.value}
    });
  }
 }

 

👉 리액트가 상태 업데이트 스케줄을 가지고 있어서 바로 실행하지 않는다고 말한 것을 기억해 두자!!
그래서 이론적으로 동시에 수많은 상태 업데이트를 계획한다면 오래되었거나 잘못된 상태 스냅샷에 의존할 수도 있다. 그래서 이 방법을 사용한다면, 리액트는 이 안에 있는 함수에서 이 상태 스냅샷이 가장 최신 상태의 스냅샷이라는 것과 항상 계획된 상태 업데이트를 염두에 두고 있다는 것을 보장한다. 

 

상태 업데이트가 이전 상태에 의존하고 있으면 3번 폼 사용하기

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓