📌 이벤트 핸들링 이벤트(event)란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 의미합니다. 3장에서 사용했던 마우스 클릭이나 마우스 커서 올리기, 입력 등등이 이벤트의 예시입니다. html의 alert와 같이 사용자가 웹 브라우저에서 상호작용하는 것이 이벤트(event)입니다. 리액트의 이벤트는 순수 JavaScript 혹은 jQuery를 사용한 웹 어플리케이션에서 이벤트를 다루는 것과 동일합니다. 기존 HTML DOM Event를 알고 있다면 리액트의 컴포넌트도 쉽게 다룰 수 있을 것입니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 이벤트를 다루도록 합시다 📌 I. 리액트 이벤트 시스템 📚 1. 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 o..

📢 https://daradarav.tistory.com/ 로 이전중입니다. DaraDaraV daradarav.tistory.com 3장에서 클래스형 컴포넌트와 함수형 컴포넌트에 대해 코드를 작성하며 배웠습니다. 선언 방식과 컴포넌트의 차이와 props, state 에 대한 자세한 코드와 설명은 다음 링크를 참고하시길 바랍니다. https://jiyesmoon.tistory.com/19?category=969102 [React] 03. 컴포넌트 📌. 컴포넌트 앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴 jiyesmoon.tistory.com 이번 챕터에서는 컴포넌트에 대해..

📌. 컴포넌트 앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 두 가지로 선언될 수 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하며 컴포넌트를 생성해보겠습니다. 또한 컴포넌트에서 사용하거나 렌더링 하는 데이터를 담는 props와 state의 차이점과 선언 방식을 배우겠습니다. 📌 I. 클래스형 컴포넌트 📚 1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. 클래스형 컴포넌트와 함수 컴포넌트는 state 기능 및 라이프 사이클 기능, 임의 메서드 정의 등에서 차이가 납니다. 각 방법으로 작성된 코드를 보면서 차이점을 비교..

📌 JSX 리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다. 📌 I. 코드 이해하기 src/App.js 파일을 열어보면 다음과 같은 코드가 있을 것입니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위의 코드를 하나씩 이해해봅시다. 📚 1. import 구문 import logo from './logo.s..

본격적으로 React에 대해서 배우기 전에 Visual Studio Code를 통해 프로젝트를 생성하는 방법에 대해 알아보겠습니다. 프로젝트 생성 시 만들어진 프로젝트의 폴더와 파일들이 의미하는 바도 함께 배워보겠습니다. I. 프로젝트 생성 🛠 1. 프로젝트 작업에 사용할 폴더를 만듭니다. 폴더를 Shift + 우클릭 후 PowerShell 터미널 열기를 클릭합니다. 🛠 2. yarn create react-app 을 입력합니다 🧨 Warning 1) 윈도우의 경우, 허가되지 않은 스크립트라는 말이 나오는 경우 윈도우 검색창에 PowerShell을 검색 후, PowerShell 아이콘을 우클릭 하여 관리자 권한으로 실행 Set-ExecutionPolicy Unrestricted 입력 후 엔터 y를 눌러서..

📌 I. 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있습니다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했습니다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있습니다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었습니다. 이번 포스트에서는 여러 프레임워크 중 React가 중심이 된 이유와 개발 환경 설정을 해보겠습니다. 또한 리액트의 주요특징인 Virtual DOM에 대해서 알아보겠습니다. 📚 1. 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키..