DOM
논리 트리
컴포넌트
앨리먼트의 집합
앨리먼트
요소 ex) 작은 버튼
컴포넌트 상태 다루기
useState는 리액트에서 제공하는 컴포넌트의 상태값을 관리해주는 훅이다!
예시 코드
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<!-- 바벨이 읽을 수 있게 만들어 준다. -->
<!-- 바벨은 자바스크립트 컴파일러! JSX표현을 자바스크립트가 이해할 수 있는 표현으로 바꾸어준다. -->
<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>
</body>
</html>
useState lazy initialization
추가로 useState 초기값을 넣어줄때, localStorage처럼 초기값을 가져오는데 시간이 조금 걸리거나, resource소비가 되는 경우 초기값을 함수로 넣어주면 lazy initialize된다! (꿀팁)
그렇다면 언제 게으른 최적화를 써야할까? 이는 상황에 따라 다르다. 문서에서는 '비싼 비용의 계산' 이 필요할 때 쓰라고 되어있다. 앞선 예와 같이 localStorage 의 접근, map, filter,find 등의 배열을 조작하는 것들이 그 예가 될 수 있다. 일반적으로, 함수를 통해서 값을 구해야한다면, 이는 비싼 비용이 드는 계산이며, 게으른 초기화를 하는게 좋을 수도 있다. new Date()도 마찬가지로.
잠실사는 주니어 개발자