📅 2025-10-13

➡️ React State에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

---

🔎 학습 리마인드

📌 State

• 컴포넌트 내부에서 바뀔 수 있는 값
• 이렇게 변하지 않는 값이라면 상관없지만, 값이 바뀌어야 한다면 state로 관리해야 함

💡 useState

• state는 useState() 훅을 사용

  // 배열의 구조분해 할당을 사용
  const [value, setValue] = useState(초기값)

  • 첫 번째 인덱스 → state 이름
  • 두 번째 인덱스 → set + state이름
  • state는 언제든지 변할 수 있는 값이기 때문에 초기값이라는 개념이 존재
  • state는 반드시 setState(변경하고 싶은 값)을 사용

---

📌 State 응용

💡 Button click Event + State

• button 이벤트

  import React, { useState } from "react";
  
  function App() {
    const [animal, setAnimal] = useState("강아지");
  
    function handleClick() {
      setAnimal("고양이");
    }
  
    return (
      <div>
        {animal}
        <button onClick={handleClick}>바꾸기</button>
      </div>
    );
  }
  
  export default App;

  • 위의 코드에서 버튼을 누를 때 마다 ‘강아지’ → ‘고양이’ → ‘토끼’ → ‘강아지’ → … 순서로 나타나게 만들기

    import React, { useState } from 'react';
    
    function App() {
        const [index, setIndex] = useState(0);
    
        const animal = ['강아지', '고양이', '토끼'];
    
        function handleClick() {
            setIndex((index + 1) % animal.length);
        }
    
        return (
            <div>
                {animal[index]}
                <button onClick={handleClick}>바꾸기</button>
            </div>
        );
    }
    
    export default App;

💡 onChange Event + State

• input과 state

  import React, { useState } from "react";
  
  const App = () => {
    const [text, setText] = useState("");
  
    const handleChange = (event) => {
      setText(event.target.value);
    };
  
    return (
      <div>
        <input type="text" onChange={handleChange} value={text} />
        <p>입력값: {text}</p>
      </div>
    );
  };
  
  export default App;

  • 보통 input에서는 사용자가 입력한 값을 state로 관리하는 패턴을 사용

    onChange와 value를 동시에 쓰는 이유

    • React에서 input 태그를 다룰 때 보통 value와 onChange를 같이 연결
    • 이런 방식을 제어 컴포넌트라고 함

---

📌 제어 컴포넌트 vs 비제어 컴포넌트

💡 제어 컴포넌트

• 입력 필드의 값이 React의 state에 의해 완전히 관리되는 컴포넌트
• 입력의 주도권을 React state가 가지고 있기 때문에 항상 일관된 상태를 유지할 수 있음

장점

• 입력 값이 항상 State의 동일하게 맞춰져 있어 예측 가능
• 값 검증이나 조건부 처리가 쉬움
• 여러 입력을 모아 폼 데이터를 제출할 때 관리가 편함
  
  

💡 비제어 컴포넌트

• 반대로 value 속성을 state와 연결하지 않고 onChange만 두거나 아예 이벤트도 쓰지 않고 DOM 자체의 값을 직접 다루는 경우
• 이럴 땐 input이 스스로 값을 관리하기 때문에 React의 상태와 완전히 동기화되지 않음

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
    console.log("state 값 : " , inputValue) ;
  };

  return (
    <div>
      {/* value를 state와 묶지 않음 */}
      <input type="text" onChange={handleChange} />
      <p>입력한 값: {inputValue}</p>
    </div>
  );
}

주의할 점

• React의 setState는 비동기이므로, onChange 안에서 바로 console.log(state)를 찍으면 갱신 전 값이 출력될 수 있음
• 비제어 방식은 단순한 경우에는 문제 없지만, 값의 흐름을 일관되게 관리하기 어려움
• 일반적인 폼 개발에서는 제어 컴포넌트 방식이 권장되며, 특수한 경우(예: 성능 최적화, 외부 라이브러리 사용)만 비제어 방식 사용

---

🌊 Deep Dive

🤔 리액트 컴포넌트의 생명주기(Life Cycle)란?

Mount

• 탄생 → 컴포넌트가 탄생하는 순간
• 화면에 처음 렌더링 되는 순간
  • A 컴포넌트가 Mount 되었다! → A 컴포넌트가 화면에 처음으로 렌더링 되었다!
• 서버에서 데이터를 불러오는 작업

Update

• 변화 → 컴포넌트가 다시 렌더링 되는 순간
• 리렌더링 될 때를 의미
  • A 컴포넌트가 Update 되었다! → A 컴포넌트가 리렌더링 되었다!
• 어떤 값이 변경되었는지 콘솔에 출력

UnMount

• 죽음 → 컴포넌트가 화면에서 사라지는 순간
• 렌더링에서 제외되는 순간을 의미
  • A 컴포넌트가 UnMount 되었다! → A 컴포넌트가 화면에서 사라졌다!
• 컴포넌트가 사용하던 메모리 정리

➡️ 지금은 흐름만 이해하자!

---