패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.useState
리액트는 컴포넌트 안의 상태를 관리할 수 있는 훅(Hook)을 제공해준다.
const [state, setState] = useState(initialState);useState는 초기값(initialState)을 인자로 받아 상태 유지 값과 상태를 변경할 수 있는 함수를 반환한다.
최초 렌더링 시 상태를 나타내는 값(state)는 전달된 초기 값을 가지며, 이후 렌더링 시에 전달된 인자는 무시된다.
이후 상태 변경은 setState를 사용하며 이 함수는 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다. 이후 렌더링 시에 state 값은 항상 갱신된 값을 유지한다. 또한 이전 state값을 참고하여 값을 갱신하는 경우, 인자로 함수를 넘겨줄 수 있다.
이전의 예시를 useState를 사용하도록 변경하면 다음과 같은 형태가 된다.
const $root = document.getElementById("root");
const App = () => {
const [keyword, setKeyword] = React.useState("");
const [typing, setTyping] = React.useState(false);
const [result, setResult] = React.useState("");
function handleChange(e) {
setKeyword(e.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 />, $root);App 컴포넌트 내에 keyword, typing, result 세 개의 state를 선언하여 관리하고 있다.
useEffect
위 예제를 좀 더 발전시켜보자.
새로고침 등으로 화면을 벗어나도 입력한 검색어가 유지되길 원한다.
쿠키나 웹 스토리지 등에 저장하는 방법으로 구현할 수 있는데, 여기서는 웹 스토리지를 사용한다.
const $root = document.getElementById("root");
const App = () => {
const [keyword, setKeyword] = React.useState(() =>
window.localStorage.getItem("keyword")
);
const [typing, setTyping] = React.useState(false);
const [result, setResult] = React.useState("");
React.useEffect(() => {
window.localStorage.setItem("keyword", keyword);
}, [keyword]);
function handleChange(e) {
setKeyword(e.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 />, $root);달라진 점은 크게 2가지이다.
-
keyword state를 선언하는 과정에서
useState의 초기값으로 함수를 넣어주었다. 이렇게 작성하면 맨 처음 렌더링 당시 함수를 실행하여 리턴되는 값으로 keyword에 할당된다. 이후 렌더링에서는 함수가 실행되지 않는다. 이 방식은 초기값을 계산하는데 큰 비용이 들거나, 시간이 걸리는 등의 상황에 사용하면 유용하다. -
useEffect를 사용하여 사이드 이펙트를 다루고 있다.useEffect는 명령형 또는 어떤 효과를 발생시키는 함수를 인자로 받으며, 두 번째 인자로는 의존성 배열을 입력받는다. 의존성 배열에 있는 값이 변경될 때만 인자로 넘겨진 함수가 실행된다. 의존성 배열을 전달하지 않으면 모든 렌더링에 대해 실행되며, 빈 배열을 넘긴다면 첫 렌더링에만 실행된다.
예시에서는 keyword를 의존성 배열로 넘기고 있기 때문에, 첫 렌더링과 keyword의 값이 변할 때마다 로컬 스트로지에 'keyword'라는 키값으로 입력한 텍스트를 저장할 것이다.
