Younho9 Notes2020-03-16
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;
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;
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 에 입력한 값이 무엇인지 알 수 있다 .
여러 개의 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;
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 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);
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;
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 공부 자료를 찾기 어렵다. 최신 기술이라 빠르게 변하고 있어서 책보다는 인터넷 자료 + 온라인 강의로 공부해야 한다.
생활코딩 - 4시간 40분 분량
velopert 님 강좌 - 2시간 53분 분량
zeroCho 님 강좌 - 12시간 44분 분량
Udemy 강좌 - 26시간 42 분 분량
앞으로 ..
zeroCho님의 JavaScript 웹게임 강좌와 React 웹게임 강좌가 친절하게 설명하면서도생각하게 만드는 예제들을 사용해서 도움이 되는 것 같다. 이 두 강좌를 듣고 기초를 쌓는다.
인터페이스디자인 수업 때 만든 미디어학과 수강계획 페이지를 만들어본다. 컴포넌트 기반인 React를 활용하기 좋은 예제인 것 같다.