ReactJS3 [JavaScript] ReactJS: STATE(2) 💻미션: Unit Conversion(minutes -> hours) App 만들기💻 DOM(Document Object Model) - 웹페이지 HTML elements를 트리 구조로 표현한 것 - DOM 구조 내 원하는 element에 접근해서 수정 가능 Virtual DOM - 실제 DOM의 복사본 - JavaScript의 메모리에 저장된 JavaScript 객체에 불과: 실제 UI에 영향을 미치지 못함 - Reconciliation(재조정): 변경된 element만 실제 브라우저 화면에 적용 - 항상 2개의 가상DOM이 존재: 변경 이전 & 변경 이후 - 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그릴 필요가 없음 https://ko.legacy.reactj.. 2024. 10. 22. [JavaScript] ReactJS: STATE(1) ReactJS에서 'State'State(상태): 컴포넌트 내부에서 관리하는 데이터 / 컴포넌트의 동적 상태를 반영 / 변경 가능 Props(속성): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값 / 컴포넌트 외부에서 설정 / 읽기 전용 ex. '버튼 클릭 수(counter)'를 state로 관리할 수 있다 1. 수동 렌더링: 새롭게 바뀐 부분(클릭 수)만 rendering - 새 Container 컴포넌트를 생성하는게 X - 전체를 재생산하지 않고, 변경된 부분만 업데이트한다Container: JSX로 정의된 함수형 컴포넌트 2. 자동 렌더링: 데이터가 바뀔 때마다 Container를 rerendering & refresh UI(권장) - 위 방법의 단점: 데이터가 바뀔때마다 렌더링 함.. 2024. 10. 21. [JavaScript] ReactJS: Basics 💻미션: 클릭하면 클릭 수 세는 버튼 만들기 💻 Vanilla HTML 1) HTML 만들기2) JavaScript에서 가져오기3) listen for the event4) update the data & HTML ReactJS:애플리케이션이 interactive하도록 만들어주는 라이브러리 ReactDOM(Document Object Model) : 모든 React 요소들을 HTML body에 둘 수 있도록 해주는 라이브러리 (React 애플리케이션을 브라우저에 렌더링) (React elements -> HTML) 1) ReactJS, ReactDOM import하기 2) body 안에 empty 만들기: 나중에 여기서 ReactDOM이 React elements를 가져다놓는다 3) .. 2024. 10. 21. 이전 1 다음 반응형
