200316

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

React 입문

Input 상태 관리하기

사용자가 입력할 수 있는 input 태그의 상태를 관리하는 방법

• input에 내용을 입력하면 아래의 값이 업데이트됨.

• 초기화를 클릭하면 input 내부에 내용도 지워지고, 아래의 값도 지워짐.

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;

App.js

import React from 'react';import InputSample from './InputSample';
function App() {    return <InputSample />;}
export default App;

input 의 onChange 이벤트를 사용. 이벤트 객체 e 를 파라미터로 받아와서 사용 . e.target 은 이벤트가 발생한 DOM인 input DOM을 가리키게 되고, DOM의 value 값, e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다 .

Event | PoiemaWeb

여러 개의 input 상태 관리하기

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

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;

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

이 부분을 풀어 쓰면

const nextInputs = {    ...inputs,};
nextInputs[name] = value;
setInputs(value);

useRef 로 특정 DOM 선택하기

JavaScript를 사용할 때는 특정 DOM을 선택하기 위해 getElementById , querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할 수있는데 그럴 때 ref 라는 것을 사용한다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용한다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용하는데, 클래스 컴포넌트는 현재 별로 중요하지 않다.

InputSample.js 에서 초기화 버튼을 클릭했을 때 이름 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;

React 공부를 하며 느낀점

• JS 기초 문법만 떼고 바로 React 입문으로 넘어오니 DOM, Event 객체 등 JS에서 부족했던 개념이 등장할 때마다 낯선 React 구조와 함께 머리 속을 복잡하게 만들었다 .

• 아직 React와 JavaScript의 관계가 정확하게 어떤 것인지 모르겠다. 강의를 보면 JavaScript를 사용할 때와 React를 사용할 때를 구분하면서 사용하는 부분들이 있다 . React도 결국 JS니까 JS로만 해도 다 되는 걸로 생각했는데 왜 구분하는 건지 이해되지 않는다.

• 좋은 React 공부 자료를 찾기 어렵다. 최신 기술이라 빠르게 변하고 있어서 책보다는 인터넷 자료 + 온라인 강의로 공부해야 한다.

  1. 공식 문서

  2. 생활코딩 - 4시간 40분 분량

  3. velopert 님 강좌 - 2시간 53분 분량

  4. zeroCho 님 강좌 - 12시간 44분 분량

  5. Udemy 강좌 - 26시간 42 분 분량

앞으로 ..

• zeroCho님의 JavaScript 웹게임 강좌와 React 웹게임 강좌가 친절하게 설명하면서도생각하게 만드는 예제들을 사용해서 도움이 되는 것 같다. 이 두 강좌를 듣고 기초를 쌓는다.

• 인터페이스디자인 수업 때 만든 미디어학과 수강계획 페이지를 만들어본다. 컴포넌트 기반인 React를 활용하기 좋은 예제인 것 같다.