능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 브라우저 이벤트, 이벤트 핸들러 가령 사용자가 웹사이트 상에서 버튼을 클릭했다면, 그때는 click 이벤트가 발생하고, 우리는 이 click 이벤트가 발생했을 때 실행할 코드를 설정할 수 있다. 이벤트 발생에 따라 실행될 함수를 설정하는 것을, 이벤트 핸들러 를 할당한다고 말한다. 자바스크립트에서 이벤트 핸들러의 할당은 html 태그에 on이벤트 = "실행될함수" 속성을 설정해주는 것으로 할 수 있다. // JS에서 사용하는 방법 Alert Button in JS // React에서 하는 방법 Alert Button in React 코드블럭을 비교 했을 때 React의 특징은 아래와 같다 jsx 형태..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 프로젝트 생성 yarn create vite 프로젝트이름 --template react 1. 모듈 설치 및 실행 yarn ↓ yarn dev 2. React 의 변수와 상태 (props, state) 최종적으로 보여주는 페이지인 app.jsx에서 css 초기화 만들어 놓고 진행하기 import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot(document.getElementById('root')).render( , ) 2 - 1. props 비구조화 할당 props..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). JS, 플젝을 지나 오늘부터 시작되는 React. 사실 예전에 독학을 할 때 클론코딩으로 접해본 경험이 있다. 당시 JS를 지금보다 더 몰랐기 때문에 지금 생각해보면 표면적으로만 아하! 했었 던것 같다. 0. 개념 전 Facebook, 현 Meta에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크)이다. 이를 통해 페이스북, 인스타그램, 넷플릭스 모두 이 React 로 만들어졌다고 한다. React는 오픈소스 프로젝트이기 때문에, 아래 링크를 통해 소스를 확인해 볼 수 있다. 오픈소스바로가기 GitHub - facebook/react: A declarative, efficient, and flexib..