+) 빡대가리식 정리 추가
ㅋㅋㅋ
state 후보군들 모두 state만들어놔 그리고 바인딩 하면서 필요 없는 애들은 없애면 됨.
데이터는
1. 변수에 넣거나
2. state에 넣거나
=> Vue.js에서 data와 비슷한듯?
리액트의 데이터 저장공간인 state 만드는 법
1. { useState } 상단에 첨부
2. useState(데이터)
=> 이건 엄밀히 따지면 다르긴 한거 같긴한데 Vue.js에서 mapState랑 비슷한 개념인듯?
useState('남자 코트 추천');를 쓰면 [a, b]
어레이가 남고 데이터 두개가 들어있다.
a는 앞에 들어간 진짜 데이터 '남자 코트 추천'이 들어가고
b는 이 데이터를 수정하기 위한 함수가 생성이 된다.
여기서 js 신문법을 쓴다.
ES6 diestructuring 문법(구조 분해 할당)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
=> 최근 프로젝트를 하며 Node.js 에서도 활용되는 것을 본적이 있다.
let [a, b] = useState('남자 코트 추천');state는
1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용해 만들어야함
3. 문자,숫자,array,object 다 저장가능
왜 그러면 굳이 state를 만들어서 쓰냐?
장점이 있으니께
리액트를 웹앱처럼 동작을 하게 만들려면 데이터를 전부 state에 넣어야한다.
왜냐하면 state는 변경이 될 때, HTML이 자동으로 재렌더링이 된다.
그냥 변수는 새로고침을 수동으로 해줘야한다.
=> Vue.js에서 Vuex에 데이터를 어디에 저장하고 actions를 라이프사이클 어디에 넣어주느냐에 따라서 데이터 변동사항이 언제 작동하느냐 달라지곤 했다. 여기에서 일단 state에 다 넣어주면 바로바로 변동한다는 거 암기해놓자! state 짱
근데 여기서
<h1>블로그 제목</h1>도 바꾸는게 좋을까?
이건 웹앱이랑 상관 없을듯 그냥 계속 유지될 데이터니까
그러니 가능은 한데 굳이?
=> 아니 이렇게 구분할 필요 뭐 있음 걍 다 state 하면 되는거 아닌가?
=> 아니면 혹시 나중에 메모리나 속도 이런데 뭔가 문제가 발생하나????
=> 자의로 판단하면 됨
아무튼,
자주 바뀌는, 중요한 데이터를 변수 말고 state로 저장해서 쓰세요
