UseState
컴포넌트의 상태를 다루는 훅이다.
여기서 APP()
은 button
이나 input
등 여러 요소들을 포함하고 있으므로 컴포넌트이다.
useState
를 사용해서 어제 만든 검색창 예제를 다음처럼 바꿀 수 있다.
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [keyword, setKeyword] = React.useState("");
const [result, setResult] = React.useState("");
const [typing, setTyping] = React.useState(false);
function handleChange(event) {
setKeyword(event.target.value);
setTyping(true);
}
function handleClick() {
setTyping(false);
setResult(`We find results of ${keyword}`);
}
return (
<>
<input onChange={handleChange} />
<button onClick={handleClick}>search</button>
<p>{
typing ?
`Looking for ${keyword}...` :
result}
</p>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
useState
: 상태값을 관리해주는 Hook. useState
에 기본값을 넣어서 주면 배열로 된 두 가지의 값이 나온다. [state(진짜 값), setState(state를 업데이트 할 수 있는 함수)]
useEffect
컴포넌트의 사이드 이펙트를 다루는 훅이다.
보통 사이드 이펙트라고 하면 부작용을 생각하는데, 부수 효과라는 의미를 가지기도 한다. 리액트에서 어떤 변경이나 효과가 일어날 때 그 효과를 다른 곳으로 전파하거나 다른 곳에도 부수적인 효과를 내주기 위한 도구이다.
이전에 만든 검색창 예제에 검색을 할 때, 키워드가 로컬 스토리지에 저장될 수 있도록 만들어보자.
useEffect(() => {
실행할 내용
}, [사이드 이펙트를 일으키고 싶은 대상]);
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [keyword, setKeyword] = React.useState(
window.localStorage.getItem("keyword")
);
const [result, setResult] = React.useState("");
const [typing, setTyping] = React.useState(false);
React.useEffect(() => {
window.localStorage.setItem("keyword", keyword);
}, [keyword]);
function handleChange(event) {
setKeyword(event.target.value);
setTyping(true);
}
function handleClick() {
setTyping(false);
setResult(`We find results of ${keyword}`);
}
return (
<>
<input onChange={handleChange} value={keyword} />
<button onClick={handleClick}>search</button>
<p>{typing ? `Looking for ${keyword}...` : result}</p>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
useState
는 lazy initailize를 할 수 있다. useState
의 인자로 함수를 넣어주면 된다.useState
에 넣어주려고 할 때, IO에 대한 시간의 소요가 있으므로 그 값을 바로 가져오는 것이 불가능 할 수 있다. 이때 조금 간격을 두고라도 동작할 수 있게 하는 것이다. (= 안전하게 사용할 수 있게 한다.)useEffect
: dependency array가 있다. (useState
엔 없음!) 말그대로 동작이 의존하는 값들을 넣어주는 것이다.