[React] 중요한 데이터는 state에 담기

state 만드는 방법

리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있음.

useState를 작성하면 코드 상단에 import { useState } from "react"; 하고 들어옴.

(자동 생성 안되면 상단에 import { useState } from "react"; 직접 입력하기)

 

원하는 곳에 useState('보관할 자료') 작성하면 state에 자료를 잠깐 저장할 수 있음.

저장한 자료를 쓰고 싶을 때에는

let [ a, b ] = useState('저장된 자료');

이렇게 쓰면 a 자리에 state 이름을 자유롭게 작명해서 사용하면 됨.

[ a, b ] 무슨 문법인가??

자바스크립트 destructuring 문법으로,

array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을 때 쓰는 문법.

 

예: [ 'name', 'age' ] array 자료를 만들어 놨을때, name과 age 자료를 각각 변수에 저장하고 싶다면

let array = ['kim', 'blue'];

let name = array[0];
let color = array[1];

 이렇게 작성해도 되는데,

요즘에는

let [name, color] = ['kim', 'blue']

이렇게 작성함.

그러면 각각 name = 'kim', color = 'blue' 라는 변수가 생성됨.

왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 알아서 변수가 생성됨.

이게 변수만들 때 쓰는 destructuring 문법.

 

리액트에서 useState()를 쓰면 그 자리에 [데이터1, 데이터2] 처럼 생긴 이상한 array가 남음.

데이터1 자리엔 '저장된 자료' 같은 자료가 들어있고,

데이터2 자리엔 state 변경을 도와주는 함수가 들어있음.

 

해당 데이터들을 각각 변수로 빼고 싶으면

let [ a, b ] = useState('저장된 자료');

이러면 됨.

 

변수 말고 state에 데이터 저장해서 쓰는 이유

state는 변동사항이 생기면 state쓰는 html도 자동으로 재랜더링해줌!

 

변수로 데이터바인딩 되있는 경우, 변수에 발생하는 변동사항을 html에 반영되게 하고 싶을때 직접 '변수내용이 바뀌었으니 html도 고쳐주세요' 라고 코드 작성해야함.

 

state로 데이터바인딩이 되있는 경우, state에 발생하는 변동사항을 html에 반영되게 하고 싶을때 개입 안해도 자동으로 html도 바뀜(state는 변경이 일어나면 state가 포함된 html을 자동으로 재랜더링 해주기 때문에). 

 

장점:

- UI 기능 개발이 매우 편리해짐.

- 사이트가 부드럽게 동작함.

 

참고: 로고명 같이 거의 바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없음.

state의 장점이 state가 변경될 때마다 자동으로 state와 관련된 html이 재랜더링 된다는 것으로, 로고명과 같이 바뀔 일이 없는 데이터들을 state로 저장하는 것은 의미가 없음.

state는 상품명, 글제목, 가격과 같이 자주 변할 것 같은 데이터들을 저장하는게 좋은 습관.

 

* 자주변경될 것 같은 데이터들은 state에 저장했다가 html 에 {데이터바인딩} 하기

(변경할 일이 없는 데이터들, 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됨.)

 

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!