리액트 지식정리차 가장 기본적인 개념인 훅을 정리하려한다.
react-hook은 왜 나왔고 무슨 쓸모가 있느냐?는 다음 시리즈로 정리할 예정이다.
useState
아마도 리액트에서는 가장 많이 사용하는 훅일 것 같다.
워낙 유명하기도 하고 빈도수가 높아서 설명을 간단하게 하고 예제를 첨부한다.
- 다른 언어들의 변수처럼 가변성을 주기위해 만들어졌다.
- 변수의 할당된 값을 변화하기 위해 사용한다.
- let, var과 같은 가변 변수가 있는데 굳이 훅을 써야하는가?
useState를 한번이라도 사용해보면 3번과 같은 의문을 가질 수 있는데 이 부분도 다음 시리즈로 정리할 예정이다. 우선은 사용법을 보자.
기본적으로 리액트 환경을 다뤄본 사람이라 가정하고 코드를 작성하겠다.
(리액트를 완전 처음 접하는 분을 위해서는 나중에 다른 시리즈로 글을 작성하겠다)
필자는 yarn으로 환경을 구축했다.
$ yarn create react-app hook-usestate대표적인 counter로 코드를 보자
// useState를 사용하기 위해 import한 요소(앞에 React는 굳이 필요하진 않음)
import React, { useState } from 'react';
// 환경구축 시 기본적으로 import된 css(필자는 센터가 보기 좋아서 그냥 냅둠)
import './App.css';
function App() {
// useState 형태를 사용하여 변수 선언
// value가 값이 할당될 변수, setValue가 가변성을 위해 존재하는 변수
// 이름은 굳이 setValue로 지을 필요없음
const [value, setValue] = useState(0);
return (
<div className="App">
<p>
현재 카운터 값은 <b>{value}</b> 입니다.
</p>
<button onClick={() => setValue(value + 1)}>1 증가</button>
<button onClick={() => setValue(value - 1)}>1 감소</button>
</div>
);
}
export default App;위 예제 코드의 출처는 다음과 같다.
리액트의 Hooks 완벽 정복하기
실행을 하면 버튼을 누를 때마다 값이 변화함을 확인할 수 있다.
로직은 다음과 같다.
- 버튼을 클릭하면 onClick이 실행되어 그 안에 setValue에 value+1 또는 value-1이 할당된다.(정확하게는 setValue에 할당되는지는 모르겠다 일단은 할당으로 표현하겠다)
- setValue에 새로운 값이 할당됨으로써 useState 훅 구조로 value 변수의 값이 변경된다.
useState(0)는 초기값을 0으로 할당하기 위해 0이라 적었다.
문자열을 사용하고 싶으면 문자열을 할당하면 된다.
그리고 배열도 useState 훅 사용이 가능하다.
import React, { useState } from 'react';
import './App.css';
function App() {
const [value, setValue] = useState(1);
const [title, setTitle] = useState('');
const [contents, setContents] = useState('');
const [arr, setArr] = useState([]);
const onSubmit = (e) => {
e.preventDefault(); // 새로고침을 방지해주는 역할
const newArr = arr.concat({
id: value,
title: title,
contents: contents,
})
setArr(newArr)
setTitle('');
setContents('');
setValue(value + 1);
}
return (
<div className="App">
<form onSubmit={onSubmit}>
<input type='text' value={title} onChange={(e) => setTitle(e.target.value)} /><br/>
<input type='text' value={contents} onChange={(e) => setContents(e.target.value)} /><br/>
<input type="submit" value='배열에 추가하기' />
</form>
{arr.map((arrItem) => (
<div>
<h2>{arrItem.id}</h2>
<h4>{arrItem.title}</h4>
<p>{arrItem.contents}</p>
</div>
))}
</div>
);
}
export default App;리액트에서 배열은 객체로 취급하던가? 여하튼 일반적인 문자열, 숫자 변수와 달리 다소 복잡하다.
일단 결론적으로 배열도 useState 훅을 이용해 가변성을 줄 수 있다.
이왕 소개한김에 배열 구조가 왜 저렇게 복잡한 지에 대한 설명을 덧붙이려 한다.
이 설명은 아래 첨부한 영상을 시청하면 개념을 자세히 알 수 있다.
생활코딩 - React 8번째 강의
바쁘신 분들은 13:18 ~ 15:40와 16:54 ~ 18:30를 시청하시고 여유있으신 분들은 처음부터 끝까지 시청하길 바란다.
우리 예제는 기존 배열을 복사하진 않았지만 새로운 변수를 만들어서 concat을 활용해 기존 배열과 합치는 작업으로 새로운 배열을 생성했다.
그리고 강의 내용처럼 setArr에 새로운 배열을 할당함으로써 arr를 변화시켰다.
그리고 e.preventDefault()는 넣어줘야 결과를 볼 수 있다.(한번 주석처리한 채로 제목과 내용을 입력해보면 재밌는 결과를 볼 수 있다.)
해당 문제는 리액트 렌더링 효과때문으로 알고있는데 아직 정확하게 이해한 것이 아니라서 공부를 좀 더 하고 글을 수정하겠다.
