Techniques for dealing with REACT_state

10. useState

• Hooks

• 배열 비구조화 할당 (객체비구조화할당과 비슷 : 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해준다)

const array = [1,2];
const one = array[0];
const two = array[1];
을 배열비구조화할당으로 표현하면?
  const array = [1,2];
  const [one,two] = array;
이러캐..

import React, {useState} from 'react';

const Say = () => {
  //첫번째:현재상태, 두번째:상태를 바꿔주는 함수(Setter함수)
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕히가세요')
  
  return (
    <>
      <button onClick={onClickEnter}> 입장 </button>
      <button onClick={onClickLeave}> 퇴장 </button>
	  <h1> {message} </h1>
    </>
  )
}

• useState : 한 컴포넌트에서 여러번 사용가능

import React, {useState} from 'react';

const Say = () => {
  //첫번째:현재상태, 두번째:상태를 바꿔주는 함수(Setter함수)
  const [message, setMessage] = useState('');
  const [color, setColor] = useState()
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕히가세요')
  
  return (
    <>
      <button onClick={onClickEnter}> 입장 </button>
      <button onClick={onClickLeave}> 퇴장 </button>
	  <h1 style={{color}}> {message} </h1>
    </>
  )
}

• state 사용시 주의사항
  (1) state 값을 바꿔야할때는 setState / useState를 통해 전달받은 세터함수setter를 사용해야한다.
  (2) 배열이나 객체를 업데이트해야할때 : 사본 만들고, 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 혹은 세터함수를 통해 업데이트
  

//객체다루기
const object = {
  a: 1,
  b: 2,
  c: 3
};

//사본을 만들어서 b값만 덮어쓰기
const nextObject = {
  ...object,
  b: 2
}

//배열다루기
const array = [
  {
    id: 1,
    value: true
  },
  {
    id: 2,
    value: true
  },
  {
    id: 3,
    value: false
  }
];
//새항목 추가
let nextArray = array.concat({id: 4});
//id가 2인 항목제거
nextArray.filter(item => item.id !== 2);
//id가 1인 항목의 value를 false로 설정
nextArray.map(item => (item.id === 1 ? {...item, value:false} : item));

• props : 부모컴포넌트가 설정하고,
  state : 컴포넌트 자체적으로 지닌 값으로써 컴포넌트 내부에서 값을 업데이트할 수 있다.

  • props를 사용한다고해서 값이 무조건 고정적이지는 않다.
  • 부모컴포넌트의 state를 자식컴포넌트의 props로 전달하고,
  • 자식컴포넌트에서 특정 이벤트가 발생할 때 부모컴포넌트의 메소드를 호출하면 props도 유동적 사용이 가능