23.06.13) React에서 중요한 State

💡 State란?

• 일반 JavaScript 객체
• 컴포넌트 내부에서 바뀔 수 있는 값을 의미
  => 지속적으로 변경이 일어나는 값을 관리
• 렌더링 결과물에 영향을 주는 정보를 갖고 있다
  => 변경될 때마다 구성 요소가 다시 렌더링
• State를 만들 때는 useState()를 사용
• useState 는 state를 만들어주는 리액트에서만 제공하는 기능(=Hook)
• State의 값을 변경하기 위해서는 반드시 setState 함수를 이용

 

💡 setState 란?

• setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행
• state가 변경되면, 컴포넌트는 리렌더링된다

 

💡 State와 props의 차이점

• state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리
• props는 (함수 매개변수처럼) 컴포넌트에 전달

 

---

 

📌useState 훅 (사용 예시) 

1. const 로 선언을 하고 [ ] 빈 배열 을 생성한다
2. 배열의 첫번째 자리에는 state의 이름, 두번째 자리에는 set 을 붙이고 state의 이름을 붙인다
3. useState( ) 의 인자에는 state의 원하는 처음값을 넣어준다

const [ value, setValue ] = useState( 초기값 )

📌State 변경하기 

예시) 버튼(이벤트 핸들러 추가)을  클릭했을 때 state값 변경해보기

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("유재석");

  function onClickHandler() {
    setName("박명수");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>이름바꾸기</button>
    </div>
  );
}

export default App;

버튼을 클릭을 했을 때 state 값을 바꾸기 위해서는 onClickHandler 라는 함수를 따로 만들어준 후

<button> 태그에 onClick={} 에 넣어주면 함수와 컴포넌트(button 태그)가 연결된다.

그 이벤트 핸들러 안에 setName 값을 넣어주고 버튼을 누르면  setName()안에 있는 값이 “박명수”니까,

state가 “유재석"에서 “박명수”로 바뀌는 결과가 나온다.

 

 

 

 

📌참고자료

• https://ko.legacy.reactjs.org/docs/faq-state.html
• https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-state
• https://onlyfor-me-blog.tistory.com/463