React9 [React] state 더보기 📃 목차 1. 개요 / 버튼 예제 구현 2. state의 정의 ① state ② state 사용해 보기 3. 버튼 예제 Update 1. 개요 / 버튼 예제 구현 React를 활용해서 버튼 하나와 버튼을 클릭한 횟수를 보여주는 간단한 예제를 하나 만들어보자. // 'index.html'의 'root' 요소에 App Component가 성공적으로 Rendering 됐다면 아래 이미지처럼 안내 메시지와 버튼 그리고 버튼 클릭 횟수를 기록하는 문구가 보일 것이다. 여기서 버튼을 클릭했을 때 하단의 '버튼 클릭 횟수: 0회'에 변화가 있어야 하지만 실제로 확인해 보면 처음 상태 그대로인 것을 볼 수 있다. 버튼을 클릭했을 때, ClickCount 함수가 정상적으로 실행되는지 확인하기 위해서 해당 함수 내.. 2024. 1. 29. [React] React Component 생성법 1. React Component 2. React.createElement() 3. JSX ① JSX ② JSX 코드에 JavaScript 추가하기 1. React Component React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로 React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다. 여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다. 이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다. 이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다. https://www.instagram.com/ Instagram w.. 2024. 1. 5. [React] 개발 환경 설정 📃 목차 1. ReactJS 개발 환경 설정하기 ① React 설치하기 ② React 개발 모드와 배포 모드 2. Create React App ① node.js 설치 ② React 설치 ③ 프로젝트 폴더 구성 ④ React 예제 실행하기 📕 Reference React 개발 환경을 설정하는 방법은 두 가지가 존재한다. 하나는 이 글을 쓰는 시점에서 위의 ② React 개발 모드와 배포 모드 React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자. 앞에서 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로 프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가 포함되어 .. 2023. 12. 12. 이전 1 2 다음
