반응형 웹개발3 [JS] Spread 연산자와 Rest 매개변수 정리 자바스크립트에서 개발을 하다 보면 자주 사용하는 편리한 문법들이 있습니다. 특히 ES6에서 도입된 Spread 연산자와 Rest 매개변수는 현대 웹 개발에서 필수적인 기능 중 하나입니다. 이 둘의 개념과 사용법을 명확히 이해해보겠습니다.1. Spread 연산자(...)Spread는 말 그대로 '흩뿌리다', '펼치다'라는 뜻입니다. Spread 연산자는 배열이나 객체에 저장된 값들을 개별적인 요소로 펼쳐주는 역할을 합니다.1-1) 배열에서의 Spread 사용 예시배열을 결합하거나 특정 요소를 중간에 삽입할 때 매우 유용합니다.let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];// arr2 안에 arr1의 요소들을 삽입하고 싶다면?arr2 = [4, ...arr1, 5, 6];con.. 2025. 4. 23. [생활코딩] React 05. 이벤트 event html 에서는 이벤트를 발생시키는 onClick이 있다. React 컴포넌트에는 이러한 이벤트를 발생시킬 수 있는 방법이 뭐가 있을까? 우리는 컴포넌트 안에 이벤트를 설정하여 웹 화면에서 "WEB" 글자를 눌렀을 때 이벤트를 발생시켜보겠다. onChangeMode 위와 같이 props에 onChangeMode를 추가하여 해당 태그를 클릭할 때 alert 화면이 뜨도록 할 예정이다. 함수의 태그 안에 onClick 속성을 넣은 다음 리로드되는 것을 방지하는 event.preventDefault()를 호출 후 props에 onChangeMode()를 호출하도록 설정한다. 추가적으로 태그에 있는 html/css/js 내용도 클릭했을 시 각 각에 해당하는 id값이 뜨도록 설정해보자. 태그에 id값을 onCha.. 2024. 1. 23. [생활코딩] React 강의_01_실습환경구축 1. 리액트 홈페이지 접속 https://ko.reactjs.org > 시작하기 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리A JavaScript library for building user interfacesko.legacy.reactjs.org2. 실습환경구축을 하기 싫다면 본문 내용 중 "온라인 플레이 그라운드" 의 Stackblitz를 클릭하면바로 실습할 수 있도록 리액트 환경이 구축되어 있음 3. 그게 아니라면 해당 홈페이지 오른쪽에 "새로운 React 앱 만들기" 클릭 후 "추천 툴체인" 소제목을 찾아라 4. 필자는 강의 내용에 따라 "Create React App"를 선택한 후 본문 내용에 또 "Create React App" 선택 5. github에 이동.. 2024. 1. 16. 이전 1 다음 반응형
