React - state

state는 React에서 변수처럼 사용가능하다.
중요한 변수나, 자주값이 변경되는 것들은 state 관리하는것이 좋다.
변수대신 state를 사용하는 이유는
일반변수를 사용하여 값을 변경하면 새로고침을 해야만 값이 변경되는데,
state를 사용하면 값이 변경된 후 새로고침 없이 자동으로 재렌더링이 되어 화면이 새로 그려진다.

let [name, setName] = useState(['여자 코트 추천', '강남 우동 맛집','재밌는 코딩시간']);;

여기서 [a,b] 괄호 안에 있는 a,b는 [a : 변수명, b : 변수를변경하는 함수명] 이라고 보면된다.
뒷부분의 useState는 변수안에 담길 값으로, 많은데이터를 저장할수있다.

function App(){
 
 let [name, setName] = useState(['여자 코트 추천', '강남 우동 맛집','재밌는 코딩시간']);;
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ name[0] }</h3>
        <p>2월 18일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

여기서 만약 name[0]의 값을 변경하려면 state를 이용해 수정할수있는데,이때 주의할점이 있다.

• state는 값의 일부만 변경불가, 전체 통으로만 변경이 가능하다.

function App(){
  
  let [name, setName] = useState(['여자 코트 추천', '강남 우동 맛집','재밌는 코딩시간']);
  
  function change(){
    setName (['남자 코트 추천', '강남 우동 맛집','재밌는 코딩시간']);
    }
    
  return (
<div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
      <button onClick={ change }> 수정버튼 </button>
        <h3>{ name[0] }</h3>
        <p>2월 18일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

이런식으로 새로운 함수를 선언해, 변수변경함수를 이용하여 name배열 전체를 수정해주어야한다.

해당방법과 또 다른방법이 하나 더 있다.
앞에서 말한것과 같이 state는 값의 일부만 변경이 불가하다.
name[0] = '남자 코트 추천';

그러므로 이렇게식으로 등호 = 를 이용해서 값을 변경할수가 없다.
배열전체를 deep copy를 하여 사용해야한다.

var 새로운어레이 = [...원본어레이]

[...abc] => 기존의 [ ]를 없애고 새롭게 [ ]만들어 가져옴으로, 기존의 배열이아닌 새로운배열을 만든다.

spread 연산자라고하는 ES6 신문법으로
array나 object 자료형 왼쪽에 붙일 수 있으며
뜻은 별거없고 중괄호나 대괄호를 벗겨주세요 라는 뜻
...[1,2,3] 이렇게 쓰면 그 자리에 1,2,3 이 남는다.
괄호 벗기기용 연산자라고 생각하면 이해가 쉬울것 같다.

function change() { 
          var newChange = [...name];  
          newChange[0] = '남자 코트 추천';
          setName(newChange)
    }

• state는 직접 수정할 수 없어서 name의 복사본을 만든다.
• name이라는 state의 복사본을 만들어 newChange라는 변수에 저장합니다.
• newChange의 0번째 데이터를 '남자 코트 추천'으로 변경한다.
• change() 함수 안에 넣어서 name변경함수를 사용하여 state를 변경한다.