컴포넌트(1) - State

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.
• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다.
• useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다.

1.선언방법

• React 모듈에서 {useState}를 불러오고 useState()를 선언해서 사용하면 된다.

import { useState } from 'react';

let [글제목, 변경글제목] = useState('남자 코트 추천');
let [글제목, 변경글제목] = useState(초기값 생략 가능);

2.데이터 변경 방법

• state 변경함수는 ()안에 넣은걸로 state를 갈아치워주는 함수

// 간단하게 보는 사용법
let [ 따봉, 따봉변경 ] = useState(0);
따봉변경(새로운state)

// 실제 사용 예제
import { useState } from 'react';

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

3.array와 object 변경 방법

• Spread Operator 문법을 이용해 작성해야된다.

let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

let data1 = [1,2,3];
let data2 = [...data1];
console.log(data1 === data2) //false

⚠️ 주의사항

let data1 = [1,2,3];
let data2 = data1;

이렇게 작성하면 data1에 있던 자료를 data2에 복사한다는 뜻인데

그렇다고 data1과 data2는 각각 [1,2,3]을 별개로 저장하는게 아니다

결국 data1과 data2는 똑같은 값을 공유한다. (같은 자료를 가르킨다고 봐도 무방하다)

data1의 값이 변경된다면 data2의 값도 자동으로 변경된다.

 

🔔 만약 사용 한다면?

• 블로그 로고명같이 자주 바뀌지 않는 데이터들은 state를 굳이 사용할 필요가 없다.
• 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습이다.

 

 

 

 

 

참고 사이트

[React] 4. React 컴포넌트(3) - State 알아보기(React Hooks 사용)