<frontend> {15} </React_part 2. 동적 interaction>

https://chan4im.tistory.com/190

<frontend> {14} </React_part 1>

앞선 과정에서 react 컴포넌트를 만들 때, 동적인 부분은 하나도 없었다.

즉, 값이 바뀌는 일이 없었지만, 이번에는 사용자의 interaction에 따른 변화가 필요할 때, 어떻게 구현할 수 있는지 알아볼 필요가 있다.

 

Ex. 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 생성해보자!

Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

App.js

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

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

export default App;

 

📌 이제, Counter에서 버튼이 클릭되는 이벤트가 발생한다면?

→ 특정 함수가 호출되도록 설정해보자.

여기서 onIncrease 와 onDecrease 는 화살표 함수를 사용해 button의 onClick 으로 함수를 연결해주었다.

즉, react에서 element에 이벤트 설정시, 다음의 형태로 설정한다.

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

Counter.js

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

cf. =>함수 참고

-  좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다.

(https://learnjs.vlpt.us/basics/05-function.html#%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98)

05. 함수 · GitBook

 

 

 

🤔 동적인 값에 대한 컴포넌트 상태관리, useState..?

Ex. 아래 코드는 react 패키지에서 useState라는 함수를 불러온다.
이때, Setter함수는 param에서 전달받은 값을 최신값으로 설정한다.

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;

 

 

 

 

 

 

---

 

InputSample.js

import React from 'react';

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;​

App.js

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

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

export default App;​

여기에 대해, input에 입력하는 값이 아래에 나타나고, 초기화버튼을 누르면 input 값이 비워지도록 구현해보자.

useState를 사용, input의 onChange 이벤트를 사용할 때,
이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있고,
이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게 된다.
이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있으며, 이 값을 useState를 통해 관리해주면 된다.

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;

 

 

 

 

 

 

 

---

 

🤔 useRef로 특정 DOM 선택하기
JS에서 특정 DOM을 선택해야할 때, getElementId, querySelector 같은 DOM Selector함수를 사용해 DOM을 선택한다.

React에서도 가끔 DOM을 직접 선택하는 상황이 발생하는데, 이때 ref라는 것을 사용한다.
함수형 컴포넌트에서 ref사용 시, useRef라는 Hook함수를 사용한다.


Ex) 초기화 버튼 클릭 시, 이름 input에 포커스가 잡히는 기능 구현

InputSample.js


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;

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.