useState

useState

• 리액트 16.8이상부터 Hooks라는 것을 지원하면서 함수컴포넌트에서도 useState()함수를 통해 state값 관리가 가능합니다.

• state는 자신 컴포넌트가 유동적으로 변경될 값을 관리할 때 사용합니다.

• 쉽게 설명하면, getter와 setter의 역할을 합니다.

사용법

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

function App() {

let number=1;//상태값이 아님

const add=()=>{//function과 같음 add메소드임
	number++;
    console.log("add",number);
}

return(
    <div>
      <h1>숫자:{number}</h1>
      <button onClick={add}>더하기</button>//이벤트 리바인딩시 add()사용금지 그냥add 로 해줘야함 
                                         //add()를 사용하면 페이지가 return되는 순간 메소드가 실행됨
    </div>
  );
}

이경우 더하기 버튼을 눌러도 화면에 그려지는 '숫자:1' 은 변하지않음
let number=1; 상태값이 아니기때문... 상태 값으로 만들기 위해서는 useState활용

function App(){
//[변수명,set]=useState(값)  
const [number,setNumber]=useState(1);//React안에 hooks라이브러리
                                     //number값을 변경하고싶다면 무조건 setNumber를 호출변경

const add=()=>{
  setNumber(number+1);//리엑트한테 number값변경할께라고 요청
  console.log("add",number);
}

//상태값이 변경되면 전체가 다시 그려지게되는데(=다시return된다)그안에 자식들도 다 다시 그려진다
// 이때 컴퍼넌트로 따로 분리한 자식들은 자신만의 return이 있기때문에 함수를 사용해 다시 return하지 않게 제어할수있음
  return(
    <div>
      <h1>숫자:{number}</h1>
      <button onClick={add}>더하기</button> 
      <Sub/>
    </div>
  );
}
}