저번 포스팅에서 작성하였던 프로퍼티(props)는
컴포넌트 내부에서 값을 바꿀 수 없었다.
하지만 분명 컴포넌트에서 값을 바꿔야 할일이 있을터....
그럼 그때 어떻게해야하나?? 그때는 state를 사용한다!!
💡 1. state가 뭘까??
- 컴포넌트 내부의 동적인 데이터
- 일반적으로 컴포넌트의 내부에서 변경 가능한
데이터를 관리해야할 때에 사용한다. - 현재 컴포넌트에서 생성, 변할 수 있는 데이터로
오직 state가 생성된 컴포넌트 내에서만 변경이 가능. - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용
즉, 컴포넌트에서 동적인 값을 상태(state)라고 부르며,
동적인 데이터를 다룰 때 사용된다.
상태(state)란 계속해서 동적으로 변화하는 특정 상태(=값)
상태(=값)에 따라 각각 다른 동작을 함
위처럼 상태를 다크와 라이트로 나누어서
상태를 변화시키는 토글버튼을 만들 수 있는 것이다.
🔗 2. state의 사용방법
그럼, 어떤 상황에서 state를 사용하면 되는지
예시를 통해 알아보자!!
아래의 예시를 보면, myName의 변수를
바꿔주어 화면에도 바뀔 것 같지만,
console에만 myName이 바뀐값을 볼 수 있고,
실제로의 화면엔 바뀌어서 렌더링되지 않는다.
따라서 state를 변화시켜, 그 컴포넌트를 리렌더링 시켜야지
바뀐값이 화면에 출력되게 되는 것이다.
const [state, setState] = useState(initialState);
const [데이터, 데이터변경함수] = useState(초기값(생략가능));
그렇게 하기위해 위의 useState 문법을 사용하여
함수형 컴포넌트의 상태 관리를 해야한다.
아래의 예시에서 방법을 알아보도록 하자!!
위처럼 useState를 사용하면, 클릭시 마다
화면이 렌더링되는 것을 볼 수 있다.
myName이라는 이름으로 상태를 불러와서,
setMyName이라는 상태변경함수로
값을 변화시킬 수 있는 것이다.
결론은 리액트에서는 어떤 컴포넌트가 가진
state가 바뀌면 그 컴포넌트가 리렌더링 되는것이다.
다른 예제도 살펴보자!!
state 예제로 무조건 나오는 counter!!
누르면 +1이 됩니당~ 버튼을 누르면 카운트가 +1,
초기화 시키기 버튼을 누르면 카운트가 0으로 초기화
아래처럼 Main 컴포넌트를 여러개로 호출을 해줄 수도 있다.
결과를 보면,
호출한 컴포넌트별로 상태관리가 가능한 것을 확인할 수 있다.
