[React JS] 리액트 state관리 방법

 🍕 Build your own, custom HTML Elements  

리액트 프로젝트

 

src폴더의 Index.js는 처음으로 실행되는 파일이다. 

: 여기서 react-dom에서 ReactDom을 임포트하고 있다. 이 말은 react-dom이라는 서드 파티 라이브러리에서 ReactDom이라는 객체를 임포트한다는 뜻

public 폴더의 index.html 이 유일하게 브라우저에 표시되는 화면이다. 리액트가 SPA이기 때문에 그 유일한 하나의 html이 바로 이 친구다. 

 

 

그러면  컴포넌트(Component)가 뭐야?

리액트 컴포넌트는 결국 자바스크립트 함수(Function)이다!!

컴포넌트는 JSX로 쓰여진 html코드를 반환하는 함수이다. 

또한, HTML,JS,CSS의 조합이다. 

import "./App.css";

function App() {
  let name = "cong";
  // 변수에 JSX는 return 하는 리액트 요소가 1개만 있어야 하며
  // 여기서 요소 1개라는 건 정말 하나의 요소태그만 말하는게 아니라 시블링 태그X 트리구조니까
  // div 내부에 자식요소를 여러개 배치하는 것은 ok
  // 아무것도 리턴하지 않아도 에러발생 (null이라도 리턴, null도 js에선 객체)
  // JSX에서 변수 가져오는 법: {} 중괄호 안에 변수써주면 됨
  // {}안에 삼항연산자도 넣어줄 수 있음 if의 경우는 return 뒤에 나올수없으므로 그 대신 씀
  // JSX에서는 style을 객체로 넘겨줘야해서 {{key: value, }} 이런모양
  return <div className="App"></div>;
}

export default App;

 

🍕JSX에서 동적 데이터 출력 및 표현식 작업하기 

 

우선 JSX는 브라우저에서 제공하지 않습니다. 그래서 우리가 개발자도구를 통해 소스코드를 보게 돼도 JSX는 볼 수 없죠. 결국 우리가 브라우저에서 보는 것은 변환된 코드라는 것을 알 수 있습니다. 

 

과거에는 모든 JSX문법을 쓰는 파일에서 import React from 'react'; 가 필요했습니다. 

• 아래의 예시는 정확히 같은 기능을 하는 코드입니다. 위에는 JSX를 안쓴 코드이고 아래의 경우는 JSX로 쓴 코드이죠. 결국 내부적으로 React라는 객체를 사용하고 있기 때문에 우리는 import React from 'react';를 해줘야 했던 것이죠. 

//NoJSX
return React.createElement(
    'div',
    {},
    React.createElement('h2', {}, "let's get started!"),
    React.createElement(Expenses, {items:  expenses})
  );

//JSX ver
  return (
    <div className="App">
      <h2>let's get started!</h2>
      <Expenses items={expenses} />
    </div>
  );

 

🍕State 관리하기

아래는 Form 태그를 return하는 form컴포넌트의 내용물(JSX코드)이다.

 return (
    <form>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input type="text" onChange={titleChangeHandler} />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            min="0.01"
            step="0.01"
            onChange={amountChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            min="2019-01-01"
            max="2022-12-31"
            onChange={dateChangeHandler}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="summit">Add Expense</button>
      </div>
    </form>
  );

state를 어떻게 관리할 지 확인해보자.

-form 태그 내부에 있는 각각의 input값들을 저장하기 위해서 useState()를 이용하는 상황

 

🐱‍👤방법1. form태그 내부에 각각의 input값들을 state를 여러개 사용하여 각자 관리

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

const titleChangeHandler = (event) => {
	 //1번째 방법: 각각 state만들어 관리
    setEnteredTitle(event.target.value);
}
const amountChangeHandler = (event) => {
   setEnteredAmount(event.target.value);
}   
const dateChangeHandler = (event) => {
   setEnteredDate(event.target.value);
}

🐱‍👤방법2. 하나의 state에 초기값을 객체로해서 key:value 형태로 한꺼번에 저장

(대신 하나가 업데이트되면 전부에게 영향이 갑니다. 즉, 각각의 state가 같은 동작을 하는 state여야 겠죠. 전부 같은 form에서 입력값을 받는 input태그라는 점에서 이렇게 같이 넣어줘도 됩니다. )

 const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: "",
  });
  
  const amountChangeHandler = (event) => {
    
    //2번째 방법: 1개의 state에 3개의 인풋을 객체로 넣어서 관리
    setUserInput({
      ...userInput,
      enteredAmount: event.target.value,
    });  
  };

▲예시에서는 titleChangeHandler,  dataChangeHandler 가 빠져있습니다. (amount와 같은 형식으로 써주시면 됨) 

 

🐱‍👤방법2의 setInput() 부분 함수형ver (방법2의 보완된 버전) ⭐

//2번째 방법의 함수형: 2번 방법은 그리 좋지않음, 함수형으로 아래와 같이 작성하는 것이 추천됨 
    setUserInput((prevState) => {
      return { ...prevState, enteredTitle: event.target.value };
    });

• 전개연산자(spread operator)로 이전 상태로부터 키 값의 쌍을 복사했던 객체가 돼야 함 
• 그 다음, enteredTitle: event.target.value로 오버라이드 합니다. 

-> 많은 경우에 방법1, 방법2 모두 괜찮음!

그렇지만 리액트가 상태 업데이트 스케줄을 갖고있어서 바로 실행하지 않는다고 말한 것을 기억해야 한다. 이론적으로 동시에 수많은 상태 업데이트를 계획한다면 오래되었거나 잘못된 상태 스냅샷에 의존할 수도 있음 (2번 방법으로 코드를 작성한다면 그런 상황이 발생할수도 있음)

하지만 방법2의 함수형 접근 방법을 사용한다면, 내부에 있는 함수에서 이 상태 스냅샷이 가장 최신 상태의 스냅샷이라는 것과 항상 계획된 상태 업데이트를 염두에 두고 있다는 걸 보장함 

결론: 만약 상태(state) 업데이트가 이전 상태에 의존하고 있다면 함수 폼을 사용해라 

 

---