State - 상태
어떤 사물이 현재 가지고 있는 형태나 모양을 정의 변화할 수 있는 동적인 값
리액트의 컴포넌트들은 자신의 형태나 모양을 정의하는 state를 갖고 있다.
위에서 만든 컴포넌트는 아직 state를 갖고 있지 않았다 .
state - 컴포넌트의 현재 상태를 보관하는 변수
state를 갖는 컴포넌트들은 이 state의 값에 따라(현재의 상태에 따라)
각가 다른 UI를 화면에 렌더링한다.
컴포넌트가 다시 랜더링되는 상태를 리렌더링이라고 한다 .
리액트에서 각각의 컴포넌트에 이 컴포넌트 상태를 의미하는 값이자 변화할 수 있는 값인 State를 만들 수 있으며
하나의 컴포넌트에 여러개의 state를 만드는 것이 가능하다.
이런식으로 각각의 state를 만들어서 저장가능
함수 컴포넌트에서 state를 생성하려면
1. import
import { useState } from 'react';
function App() {
useSate는 2개의 요소가 들어있는 배열이 출력
1. undefined → 새롭게 생성된 state값, useSate의 인수로 초기 값을 숫자 0이라고 넣고 저장하면 큰솔에 새로운 배열 추가된다.
이제 0은 state의 값인것이다 . => state의 현재 값
2. 함수 → state의 값을 변경하는, 상태를 변화시키는 함수가 들어있다. => 상태 변화함수
반환 값을 변수에 저장보단 배열의 비구조화할당(=구조분해할당)을 통해 한다.
import './App.css';
import { useState } from 'react';
function App() {
const [state, setSate] = useState(0); // 초기값
console.log(state);
return <></>;
}
export default App;
버튼을 누르면 함수 컴포넌트를 리렌더링한다.
컴포넌트 역할을 하고 있는 앱 함수를 재호출해 새롭게 반환하고
새롭게 반환한 값을 화면에 다시 렌더링한다.
useState(0) -> 이게 초기값
React에서는 왜 state라는 값을 만들어야할까?
(개인적인 생각이지만 그건 메타 마음인듯.. 하지만 개발자의 숨은 의도를 알아보자☺️)
let light = "OFF"로 설정하면 컴포넌트가 렌더링되지 않는다.
왜냐하면리액트 컴포넌트는 일반적인 변수가 아니라 state의 값이 변할때마다 리렌더링되기 때문이다.
삭제 확인 알림창은 소중하다. 커밋하려다가 삭제할뻔했다.. 휴..🫨