본문 바로가기
react

변경이 잦을 경우) 일반 변수 대신 state 문법!

by 코디드 2023. 3. 1.

return() 안에는 병렬로 태그 2개 이상 기입금지

state 만드는 법
1.import{useState}
2.useState(보관할 자료)
3.let[작명, 작명]
e.g.)let [ a,b] = useState('4세대');
* a : state에 보관했던 자료
  b : state 변경 도와주는 함수

let [글제목,b] = useState('여자 코트 추천');
              // = ['남자 코트 추천', 함수] 이렇게 써있는거랑 같다.

//destructing 문법
 //let num =[1,2];
  // let a = num[0];
  // let c = num[1];

  //let [a, c] = [1, 2]; 위에 처럼쓸걸 왼쪽처럼 한줄로 간단히 쓸수 있음.

**새로운 문법 배웠으면 언제 쓸지도 생각 해보기!

 
Q. 왜 state 써야함?
일반 변수는 갑자기 변경되면 html에 자동으로 반영 안됨.
state의 경우 갑자기 변경되면 state 쓰던 html은 자동 재렌더링 됨.

초간단 정리)
: 자주변경될거 같은 html 부분은 state로 만들어놓기
: 로고 이런건 자주 안변하니 하드코딩하거나 걍 일반 변수에 넣어두기

'react' 카테고리의 다른 글

동적인 UI 만들기 (모달창만들기)  (0) 2023.03.14
컴포넌트 만들기  (2) 2023.03.04
State 변경 함수 특징과 reference data type  (0) 2023.03.03
JS 함수 작성 및 State문법  (0) 2023.03.02
react 입문과 기본 문법  (0) 2023.02.20