useState - react로 DOM 조작하기(컴포넌트 상태변경)

react에서 DOM을 조작하기 위해서는 react에서 제공하는 useState()를 사용하면된다.

 

useState() 란?

react는 상태(state)가 변경(이전 state와 달라짐)되면

컴포넌트를 다시 그리는 방식 동작함(re render)

 

일반적으로 자바스크립트에서 사용한 document.get 이런 방식으로는 안됨!

 

useState를 얻는 방법은 react가 제공하는 useState(); 를 사용한다.

useState 기본 형태

  // 배열을 return
  // 인덱스 0번 : 현재 상태(state)
  // 인덱스 1번 : state를 변경할 수 있는 메소드
  
  const [현재 상태(변수명), 변경할 수 있는 메소드] = useState(초기값);

 

---

밑에 내용을 보면 단번에 이해 할거다.

 

예를 들어 input 안에 글자를 입력할 때 마다 아래 글자가 실시간으로 변경하게 하고 싶어 onchange 와 같이 사용한 경우

 

 

화면에서는 TEXT 출력위치에 변경되어야 하는데 변경이 안되고 콘솔에는 변경이 됨

 

react가 아닌 일반 자바스크립트였으면 변경이 되었을텐데 react는 따로 자체적으로 관리하기 때문에 변경이 안됨.

 

여기서 react가 제공하는 useState 를 사용해 조작

function App(props) {
  // let text = "";

  /*
  기존 let에 들어간 text가 0번 인덱스로 들어감 (상태, state)
  text의 초기 초기 값으로 선언된 빈 문자열 ""은 useState(""); 안으로 들어가 초기 값을 설정
  그리고 텍스트를 변경할 setText 함수를 1번 인덱스에 넣어준다.
  */
  const [text, setText] = useState("");

  function changeText(e) {
    // text = e.target.value;

    /*
    event 객체를 받아 input의 값을 useState()의
    1번째 인덱스 setText 함수에 값을 넣어서 상태를 변경시켜
    re render 진행해 변경해준다.
    */
    setText(e.target.value);
  }

  return (
    <div>
      <input type="text" onChange={changeText} />

      <div
        style={{ backgroundColor: "yellow", width: "100px", height: "50px" }}
      >
        <p>{text}</p>
      </div>
    </div>
  );
}

 

결과: 잘 동작 된다.

 

---

예제 심화 버전)

화살표 함수와 두 개의 useState() 를 이용해 더하기 기능이 있는 간단한 계산기 만들기

 

function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  let result = num1 + num2;

  return (
    <div style={{ textAlign: "center" }}>
      {/* 왼쪽 input */}
      <input
        type="number"
        onChange={(e) => setNum1(Number(e.target.value))}
        style={{ textAlign: "center" }}
      />
      + {/* 오른쪽 input */}
      <input
        type="number"
        onChange={(e) => setNum2(Number(e.target.value))}
        style={{ textAlign: "center" }}
      />
      {/* 결과 */}
      = {result}
    </div>
  );
}

 

결과

---

그리고 이런 use로 시작하는 함수를 react에서는 HOOK 이라고 한다.

 

HOOK이 뭔지 알고 싶다면 ?

https://fuckingjava.tistory.com/137

hook - use로 시작하는 react 함수

---

추가로 부모가 re-render 되면 모든 하위 자식들도 re-render 된다.

re-render 되는게 싫다면  display로 감추면 된다.