React_입문_2

* useState

- React 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다.

- React 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.

- 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다.

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

- 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수입니다.

const [number, setNumber] = useState(0);

 

- 다른 방식

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

* input 상태 관리하기

- onChange 이벤트 사용: 이벤트에 등록하는 함수에서 이벤트 객체 e를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킵니다. 이 DOM의 value 값, 즉 e.target.value를 조회하면 현재 input에 입력한 값을 알 수 있습니다. 이 값을 useState를 통해서 관리해주면 됩니다.

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

 

* 여러개의 input 관리하기

- input의 개수가 여러개가 됐을때는 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현 할 수 있지만 좋은 방법은 아닙니니다. 더 좋은 방법은 input에name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것입니다. 그리고 useState에서는 문자열이 아니라 객체 형태의 상태를 관리해줘야 합니다.

- ... 문법은 spread 문법입니다. 객체의 내용을 펼쳐서 기존 객체를 복사해줍니다.

- 불변성을 지켜서 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 리렌더링이 진행됩니다.

- 추가적으로 리액트에서는 불변성을 지켜줘야 컴포넌트 업데이트 성능을 최적화 시킬수 있습니다.

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;