React에서 State는 아주 중요한 개념이라 잘 이해해두는게 좋다.
강의에서 하나의 예시로 사람의 몸에 빗대어 얘기해주었다.
배고픔에 따른 상태가 배고픔 배부름 적당함 순으로 계속 바뀌게된다.
허기의 정도가 적당함 배고픔 배부름 이런식으로 계속해서 변하는걸 인간의 허기상태라 부를 수 있고.
이 상태의 값은 적당함, 배고픔, 배부름, 이렇게 세가지가 있다 라고 말할 수 있다
사람은 보통 이렇게 세개의 허기상태의 따라 각각 다른 행동을 하는데
적당함 : 일상생활
배고픔 : 배고프다하며 음식을먹으려 함
배부름 : 적당한 상태가 되기위해 소화를 시키려 함.
상태란 그냥 계속해서 동적으로 변화하는 값이고 값에 따라 다른 행동을 수행하게하는 것.
이제 웹에 빗대어 얘기를하면 더 쉬운데
요즘 웹사이트나 어플 프로그램에 유행하는 다크테마가 있는데
이런것들도 상태라 얘기할 수 있는데 어떤 컴포넌트가 상태 라는 테마를 갖고
그 테마라는 상태는 Dark,Light 라는 값을 가질 수 있고
사용자는 스위치를 통해서 상태를 Dark에서 Light, Light에서 Dark로 변화시키는 방식을 생각해볼 수 있다.
State 사용해보기, State 관리해보기
실습 예제는 대표적으로 카운터이다.
일단 카운터를 만들기위해 따로 컴포넌트를 분리시켜 제작해주겠다.
이렇게 만들어두고 App.js에서 import해왔다.
현재는 아무 기능이없어서 버튼을 눌러도 아무런 반응을 하지 않는다.
여기서 우리가 관리해야하는 상태는
h2태그 안에있는 0이다.
만들어야하는건
- 0에서 시작하여
- 증가를 누르면 1씩 증가하고
- 감소를 누르면 1씩 감소하는 count상태이다.
State는 react의 기능이기때문에 import 해와서 사용해야한다.
const [count,setCount] = useState(0)이렇게 count라는 State를 만들어서 0을 대입한 코드인데
useState는 배열상태로 관리하게되는데
생성방법이 낯설 수 있다. 하나씩 설명을 쉽게 하면
const [작명,set작명] = useState(데이터)라고 볼 수 있다. useState()안에는 넣고싶은 거의 모든걸 넣을 수 있다 변수와 비슷하게 생각해도 된다.
(배열을 넣어도되고 객체를 넣어도되고 Boolean,숫자,문자열 다 가능하다.)
그리고 앞에 배열모양으로 작성이 된 작명은 말 그대로 저 데이터의 이름을 지어주는 것.
그 뒤의 set작명은 보통 앞에 지은 작명에 set을 붙여서 짓는데
set작명의 역할은 State 변경함수라고 하는데 set의 들어있는 데이터를 조작하기 위해 사용이된다.
그리고 화면에 출력하는 방법은 그냥 중괄호 안에 작명한 이름을 넣어주면 된다.
이정도로 이해해주면 될 것 같다.
이제 버튼을 눌렀을 때 상태가 변하는걸 만들어 주면된다.
강의에선 이런식으로 제작을 해주었다.
이렇게 정상적으로 잘 작동도 한다. 지금까지 만든 코드를 보면
- count라는 이름의 State에 0을 저장해두고
- 화면에 출력하기위해 h2태그 안에 {count}를 사용해 화면에 뿌려준 다음.
- setCount라는 count 변경함수를 사용해서 함수로 +1과 -1을 해주는 함수를 제작해둔 다음
- 버튼에 onClick 이벤트를 이용해서 함수를 넣어서 작동시켰다.
이제 증가 버튼을 누르면 count인 0에 1씩 더하게되는 구조이고
감소 버튼을 누르면 count인 0에 1씩 빼게되는 구조가된것이다.
근데 증가가되거나 감소가되면 1이되거나 2가되는데 count에 들어있던 0이 1이나 2로 변경이 된것이다.
상태가 계속해서 변하게되는것.
여기서 알 수 있는건 변수로 사용해도 될것같은데 굳이 State로 사용하는 이유이다
State를 사용하는 이유는 렌더링때문인데
변수를 사용해서 제작을한다면 재렌더링이 안되지만
State를 사용해서 제작을해서 상태가 변할때마다
화면에 재렌더링을 해주어서 실시간으로 변하는걸 볼 수 있다.
결론은 State는 상태가 변하면 재렌더링해서 화면에 실시간으로 새로 뿌려준다
라는걸 알아두면된다.
여기까지가 본인이 이해한 내용.
