열이의 개발블로그

✅ JSX는 HTML과 매우 유사합니다. 하지만 다른 점이 몇가지 존재하는데 이는 꼭 알아두어야 하니 알아보도록 합시다! ✏️ label, input 태그 연결 만약 HTML에서 label과 input을 연결하여 label을 클릭했을 때 input에 커서가 가도록 하고 싶다면 label엔 for 속성을 input엔 id 속성을 주어 연결하면 됩니다. Super Converter Minutes Hours 하지만 위의 문법은 JSX에서는 틀린 문법입니다. ✅ JSX에서 틀린 문법 위와 같이 코드를 작성했을 경우 틀린 문법이 됩니다. 하지만 아무런 오류를 확인할 수 없는데 이는 react를 production 버전으로 사용하고 있기 때문입니다. 버전을 development 버전을 사용한다면 콘솔에 오류가 발생..

리액트를 사용하여 버튼을 클릭하면 숫자가 증가하는 웹 페이지를 만들어보자. ✅ counter 변수와 render 함수 사용 위의 코드를 통해 Container라는 컴포넌트를 만들고 render 함수를 통해 Container를 root 안에 그린다. Container 안에는 button이 존재하고 이 button을 클릭했을 때 countUp이라는 함수가 실행된다. countUp은 let으로 선언된 counter를 하나 증가시키고 다시 render 함수를 불러 화면을 다시 그린다. 🚨 문제 여기서 문제는 변하는 무언가가 있을 때마다 render라는 함수를 호출해줘야 변화된 것이 새로 화면에 그려진다. 즉, 모든 변화 끝에는 render 함수를 호출해야 하는 안좋은 코드인 것이다. ✅ React.useStat..

React를 사용하기 전에 Vanilla JS(바닐라 자바스크립트)와 비교를 해봅시다. ✅ Vanilla JS Total clicks: 0 Click me 위의 HTML 코드는 "Click me"라는 버튼을 클릭하면 "Total clicks"의 숫자가 올라가는 코드입니다. 이러한 프로그램을 만들기 위해서 Javascript를 활용하여 counter라는 변수를 만들고 button과 span을 선택한 뒤 함수를 만들어 버튼을 클릭할 때 발생하는 이벤트리스너를 설정하여 counter의 숫자를 하나 늘리고 span 안의 텍스트에 counter를 다시 넣어줍니다. ✅ React CDN https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaS..

프론트엔드 개발자를 희망하는 사람이라면 누구나 들어봤을 법한 기술 스택인 React.js 프론트엔드 라이브러리, 프레임워크로 주로 사용되는 React.js와 Vue.js를 비교해보는 글입니다. ✅ React.js란? React.js는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다. React.js는 사용자 인터페이스를 구축하기 위해 사용되며, 웹 애플리케이션에서 동적이고 반응형 UI를 만드는데 매우 유용합니다. ✅ React.js의 특징 컴포넌트 기반(Component Based) 아키텍처를 기반으로 하며, 이는 UI를 작은 조각으로 분할하고 각 조각을 독립적으로 관리할 수 있게 합니다. 다른 프레임워크와 다르게 MVC(Model - View - Controller) 아키텍처가 아닌 V..