자바스크립트4 [JavaScript] ReactJS: Props / React.memo 컴포넌트 = 함수대체로 맞는 말함수형 컴포넌트는 React에서 가장 기본적인 컴포넌트 유형 중 하나 React 컴포넌트는 JavaScript 함수처럼 작동 props를 매개변수로 받아 UI를 반환 Btn 컴포넌트는 2개의 props를 받음: {text, big} App 컴포넌트는 3개의 Btn 컴포넌트를 사용하여 3개의 버튼을 생성 App 컴포넌트는 Btn 컴포넌트를 재사용하여 여러 버튼을 쉽게 생성할 수 있음 부모 컴포넌트 변경이 자식 컴포넌트에 어떤 영향을 미칠까? : 기본적으로 React는 부모 컴포넌트가 재랜더링(re-rendering)되면 자식 컴보넌트들도 전부 다시 렌더링 React.memo - 이전 props와 새로운 props를 비교하여 동일한 경우 해당 컴포넌트를 다시 렌더링하지 .. 2024. 10. 24. [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. [JavaScript] 크롬 앱 만들기: Quotes and Backgrounds 랜덤 이미지를 출력하는 작업은 html에서 할 수 없다JavaScript에서 이미지를 만들고 이걸 html에 추가해야! 2024. 9. 10. [JavaScript] JavaScript on the Browser HTML은 접착제와 같음: CSS, JavaScript를 가져옴 1. document에서 elements를 가지고 올 수 있다2. document의 항목들을 변경할 수 있다 JavaScript에서 HTML 항목을 가져와 사용하는 방법 querySelector: HTML 문서에서 특정한 CSS selector에 해당하는 첫 번째 요소를 가져오는 메서드 CSS selector를 검색하여 가져온다 Event Listener : 특정 이벤트(ex. 버튼을 클릭)가 발생할 때 실행되는 함수 1) Find the element2) Listen for the event 3) React to the event const title = document.querySelector("div.hello:first-c.. 2024. 9. 9. 이전 1 다음
