그렇다 리액트는 굉장히 편하게 상태관리 를 하기 위한 많은 기능들을 제공한다. 물론 vue 에서도 비슷한 기능들이 있다! 기존 바닐라 js를 많이 쓰던 나로써는 코드도 굉장히 깔끔해지고, 상태 관리등에 굉장히 많은 이점이 있다고 생각이 든다.
예를 들어 counter 함수를 구현한다고 하면
import React, { useState } from 'react';
const Counter = () => {
const [value, setValue] = useState(0);
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b> 입니다.
</p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
이처럼 value 를 이용해 실시간으로 값을 받아 올 수 있고, setValue 를 통해서 실시간으로 값을 업데이트 해줄 수 있다!
이 뿐만 아니라 나는 기본적으로 api에 호출되는 변수들을 useState로 관리 하고 있다.
예를 들어 input 의 value 를 받아온다면
const [name, setName] = useState('');
const onChangeName = e => {
setName(e.target.value);
};
<input value={name} onChange={onChangeName} />
이런식으로 받아오면 된다. post 로 api를 보내준다면 value 값에 name 을 넣어주면 된다.
// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기
import { setState, useEffect } from "react";
...
function App() {
const [data, changeData] = setState(false)
// useEffect(실행할 함수, 트리거가 될 변수)
useEffect(() => {
if (data.me === null) {
console.log("Data changed!")
}
return () => console.log("컴포넌트 파괴, 언마운트 됨")
}, [data]);
// data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
return (
<div>
<button value="적용" onClick={changeData(!data)} />
</div>
)
}
export default App;
이런식으로 useEffect() 안에 실행할 함수, 그리고 트리거가 될 변수를 넣어주면 작동합니다!
또한 나는 이번에 spa 에서 휠 이벤트를 통해 다음페이지를 넘겨주는 작업을 했는데 여기서도 유용하게 사용 하였습니다.
useRef까지 사용하여 useRef의 예제에서 보면,
나는 spa 에서 긴 페이지를 구현하면서 section을 나누면서 유용하게 사용하였다. useRef([]) 를 이용하여 exeRef.current[0], exeRef.current[1], 이런식으로 렌더할 페이지별로 나눌 수 있다.
휠 이벤트를 예시로 들면
useEffect(() => {
const outerDivRefCurrent = outerDivRef.current;
outerDivRefCurrent.addEventListener("wheel", wheelHandler, {
passive: true,
});
return () => {
outerDivRefCurrent.removeEventListener("wheel", wheelHandler, {
passive: true,
});
};
}, []);
const wheelHandeler = () => {
outerDivRef.current.scrollTo({
top: cureent값,
left: 0,
behavior: "smooth",
});
}
이런식으로 구현이 가능하다
요즘 프론트 공부하면서, react나 vue에서도 공부할게 굉장히 많다는 걸 세삼 느끼고 있다..