React 공부하기(1) - 상태관리편

🍇 벨로퍼트와 함께하는 모던 리액트

 

아래에 기능들은 모두 React Hooks중 하나

 

on이벤트이름={실행하고싶은함수}

 

7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기

 

<Counter.js>

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;

(자세히 보기) 이렇게 하면, 렌더링되는 시점에서 함수가 호출되버림

onClick={onIncrease()}

 

(자세히 보기) useState

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

상태의 기본값을 파라미터로 넣어서 호출

호출하면 배열이 반환되는데, 첫번째 원소는 현재 상태 / 두번째 원소는 Setter 함수

[함수형 업데이트]

<counter.js>

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;

onIncrease, onDecrease setNumber에서 그 다음 상태를 파라미터로 넣어준 것이 아니라,

값을 업데이트하는 함수를 넣어줌

=> for 최적화 (나중에 알아보자)

 

8. input 상태 관리하기 - onChange

 

<App.js>

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

<InputSample.js>

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;

e.target : 이벤트가 발생한 DOM => input DOM

e.target.value : input 값

(자세히보기)

<input onChange={onChange} value={text} />

input에도 value를 설정해줘야, 상태가 바뀌었을 때 input의 내용도 업데이트 됨

 

9. 여러개의 input 상태 관리하기

 

<InputSample.js>

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;

(자세히보기) ⭐⭐⭐ 불변성 ⭐⭐⭐

값 직접 바꾸기 XXX

inputs[name] = value;

... spread 문법 OOO

setInputs({
  ...inputs,
  [name]: value
});

... spread 문법 : 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사

=> 기존 객체 직접 수정 X 새로운 객체를 만듦

=> 불변성 지키기 위해

=> 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트 됐음을 감지해서 리렌더링 됨

 

10. useRef로 특정 DOM 선택하기

<inputSample.js> 초기화 버튼 클릭하면 input에 포커스가 잡히도록

import React, { useState, useRef } from 'react';

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

  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: ''
    });
    nameInput.current.focus();
  };

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

export default InputSample;