[JS React] state 활용하기

 

리액트로 프로젝트를 제작하다보면 동적으로 텍스트 등을 변경해야할 일이 생기게 됩니다. 

일반적인 변수를 사용했을때 변경 되지 않기에, 동적으로 변환이 가능한 state를 사용합니다.

 

 

선언할땐 아래와 같이 선언합니다. 

pageName은 get, pageNameChange는 set이라고 생각하면 됩니다. 

  let [pageName, pageNameChange] = useState('리액트 공부를 위한 페이지');

 

 

활용하면 동적으로 텍스트를 변경 할 수 있는 간단한 기능을 만들 수 있습니다. 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [pageName, pageNameChange] = useState('리액트 공부를 위한 페이지');

  return (
    <div className="App">
      <h4>{pageName}</h4>
      <span onClick={ () => {
        pageNameChange('리액트 공부할거지롱');
      }}>이름 변경</span>
    </div>
  );
}

export default App;

 

 

그럼 useState 배열은 어떻게 사용할까요?

useState(['', '', '']) 형식으로 사용 가능합니다. 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지']);

  return (
    <div className="App">
      <h4>{pageName[0]}</h4>
      <h4>{pageName[1]}</h4>
    </div>
  );
}

export default App;

 

 

배열 형태로 되어 있는 스테이트를 변경할땐 조금은 다른 형식으로 진행됩니다. 

수정 될 것이 들어갈 변수를 하나 만들고, 값 복사로 넣어줍니다. 이후 수정해주고, 변경해주는 형식으로 진행됩니다. 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지']);

  return (
    <div className="App">
      <h4>{pageName[0]}</h4>
      <h4>{pageName[1]}</h4>
      <span onClick={ () => {
        let copy = [...pageName];
        copy[0] = '리액트 공부 재밌당';
        pageNameChange(copy);
      }}>이름 변경</span>
    </div>
  );
}

export default App;

 

 

만약 값 복사가 아닌 참조 복사인 아래처럼 하게 된다면, pageNameChange를 활용하여 변경하는 과정에서 같은 값이라 받아드려 변경되지 않습니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지']);

  return (
    <div className="App">
      <h4>{pageName[0]}</h4>
      <h4>{pageName[1]}</h4>
      <span onClick={ () => {
        let copy = pageName;
        copy[0] = '리액트 공부 재밌당';
        pageNameChange(copy);
      }}>이름 변경</span>
    </div>
  );
}

export default App;