항해99 스터디/리액트 (2) 썸네일형 리스트형 컴포넌트 반복 1. 컴포넌트의 반복 이란? 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. import React from "react"; function App() { return ( 눈사람 얼음 바람 ) } export default App; 코드에서 다음 형태가 계속 반복되는 것을 볼 수 있습니다. ... 지금은 li 태그 하나뿐이라 그렇게 문제가 되지는 않을 것 같습니다. 하지만 코드가 좀 더 복잡하다면 어떨까요? 코드양은 더더욱 늘어날 것이며, 파일 용량도 쓸데없이 증가하겠죠.이는 낭비입니다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대로 관리하지 못합니다. 2. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 .. 이벤트 핸들링 1. 이벤트 핸들링(Event Handling)이란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다.예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행, 클릭했을 때는 onclick 이벤틀를 실행, Form 요소는 값일 바뀔 때 onchange 이벤트를 실행합니다.리액트에서의 이벤트 시스템은 이러한 HTML에서 DOM요소에 이벤트를 설정하는 방법과 매우 유사합니다.그럼 한번 살펴 봅시다. 2. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다.아래에서 살펴 봅시다. import React, { useState } from "react"; functio.. 이전 1 다음
