DOM : 논리 트리
컴포넌트 : 엘리먼트의 집합
엘리먼트 : 요소
onChange에 들어갈 함수에 localStorage 에 저장하는 함수를 써준다. setItem()
다시 접속했을 때도 남아있게 하고 싶다면, keyword state의 초기값을 로컬스토리지에서 받아오고, input의 값으로 해볼까?
keyword, typing, result가 바뀔 때 마다 로컬스토리지에 저장하고 싶다고하면 -> useEffect를 3번??? (비효율)
반복되는 부분은 => 함수화
useState/useEffect가 반복되는 부분은 => use 커스텀 훅
application 확인
const rootElement = document.getElementById("root");
const App = () => {
console.log("App render start");
const [show, setShow] = React.useState(() => {
console.log("App useState");
return false;
});
React.useEffect(() => {
console.log("의존성 배열 없음");
});
React.useEffect(() => {
console.log("의존성 빈배열");
}, []);
React.useEffect(() => {
console.log("의존성 배열에 show");
}, [show]);
const handelClick = () => {
setShow((prev) => !prev);
};
console.log("App render end"); // 여기!!
return (
<>
<button onClick={handelClick}>search</button>
{show ? (
<>
<input />
<p></p>
</>
) : null}
</>
);
};
console.log("App render end"); // 여기 아님!! 틀렸음
ReactDOM.render(<App />, rootElement);
최초 렌더링
- ⚠️ 가장 바깥의 end ?? ====> 나는 왜 end가 먼저 render 되는거지???
=> 콘솔 위치를 ㅋㅋㅋ DOM이 그려지기 전에 했으니까!
retrun 이전에 console.log를 해주자
show = true
Child가 나타나면서, App -> Child render/useState/end -> App에 있는 useEffect 실행
text가 바뀔 때는 Child 내부의 render가 반복된다. App은 바뀌지 않음.