⏳ 2023. 5. 29. - 2023. 6. 4.
리렌더링
js로 작성한 코드는 변경 사항이 있는 경우, 요소를 처음부터 다시 생성해서 변경된 내용을 적용한다.
이러한 방식은 Reflow, Repaint에서 최적화 고민의 원인이 된다고.. 한다.
그렇다면 리액트는?
React 엘리먼트는 불변객체인데, 어떻게 바꿔?
-> 변경 사항이 있으면 재조정을 통해 변경 사항을 적용한다.
바뀐 부분만 골라서 리액트가 알아서 바꿔주기 때문에 굉장히 편하다~
이벤트 핸들링
js와 거의 똑같지만..
onEvent를 카멜케이스로 작성한다.
다음은 전역 변수로 상태 객체를 선언하여 검색창을 만든 예시이다.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootEl = document.getElementById("root");
const state = { keyword: "", typing: false, result: "" };
const App = () => {
function handleChange(e) {
setState({ keyword: e.target.value, typing: true });
}
function handleClick(e) {
setState({ typing: false, result: `Found: ${state.keyword}` });
console.log(state);
}
return (
<>
<input onChange={handleChange} />
<button onClick={handleClick}>Search</button>
<p>
{state.typing ? `Looking for ${state.keyword}` : state.result}
</p>
</>
);
};
function setState(newState) {
Object.assign(state, newState);
render();
}
function render() {
ReactDOM.render(<App />, rootEl);
}
render();
</script>
</body>
</html>
'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글
[카카오테크캠퍼스 8주차] React 기초: 스타일과 Error 처리 (0) | 2023.05.31 |
---|---|
[카카오테크캠퍼스 8주차] React 기초: Hooks (0) | 2023.05.31 |
[카카오테크캠퍼스 8주차] React 기초: 시작하기 (0) | 2023.05.29 |
[카카오테크캠퍼스 7주차] JavaScript 마스터: Events (0) | 2023.05.24 |
[카카오테크캠퍼스 7주차] JavaScript 마스터: DOM (0) | 2023.05.22 |