React10 [React] CH04. 이벤트 다루기 & state 변경하는 법 ※ 참고 터미널에 뜬 warning ⇒ eslint가 잡아주는 문법 체크사항 eslint ⇒ 잘못된 코딩 관습을 잡아주는 라이브러리 /*eslint-disable*/ ⇒ warning 제거 1. 이벤트 다루는 법 onClick 이벤트 옛날 자바 스크립트 리액트 onClick="클릭될 때 실행할 JS" onClick={ 클릭될 때 실행할 함수 } onClick={ ()=>{ 실행할 내용 } } ※ ES6 신버전 문법 addEventListener('click', function(){}) = addEventListener('click', ()=>{}) 2. state 변경하는 법 state 변경 함수 이용 - state 변경함수로 변경 → 자동 재랜더링 { 따봉변경(따봉+1) }}>👍 [ 참고 ] https.. 2021. 9. 9. [React] CH03. state에 중요한 데이터 저장 1. state 개념 정의 - 변수 대신 쓰는 데이터 저장 공간 데이터 저장하는 방법 1) 변수에 저장 2) state에 저장 2. state에 데이터 저장하는 방법 1) { useState } 상단에 첨부(import) import { useState } from 'react'; 2) useState(데이터) 이용하여 만듦 [state 데이터, state 데이터 변경 함수] ⇒ 2개의 데이터가 담긴 배열 생성됨 useState('남자 코트 추천') = [a, b] - a : '남자코드 추천' b : 남자 코드 추천 state 정정해주는 함수 let [글제목, 글제목변경] = useState('남자 코트 추천'); 3) useState(데이터) 사용 - 문자, 숫자, array, object 다 저장 가.. 2021. 9. 9. [React] CH02. JSX 이용하여 HTML 페이지 제작 App.js : 메인페이지에 들어갈 HTML 짜는 곳 App.css : 메인페이지 CSS 짜는 곳 JSX : 자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 리액트 기본 내장 문법 1. 태그에 class 지정 2. 리액트가 HTML코딩보다 편리한 이유 데이터 바인딩이 쉽다 ex) React, Angualr, Vue 전통적 자바스크립트 데이터 바인딩 리액트 데이터 바인딩 document.getElementById().innerHTML = ''; # 리액드 데이터 바인딩 ⇒ {변수명, 함수 등} // src, id, href등 속성에서의 데이터 바인딩 개발 Blog // 변수명 데이터 바인딩 {posts} // 함수 데이터 바인딩 {함수()} 데이터 바인딩 : 동적인 데이터를 처리 : .. 2021. 9. 9. [React] CH01. 리액트 설치 및 개발환경 설치 1. nodejs 검색 후 가장 최신 버전 설치(오른쪽 현재 버전 설치(LTS가 아님)) Automatically install the necessary tools에 체크하는 것 말고 나머지는 계속 next 누르며 기본 설정 유지 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org [ 참고 ] nodejs 설치 ⇒ create-react-app 라이브러리 사용 가능, npm 툴(라이브러리 설치 사용) 이용 가능 2.visual studio code 설치 https://code.visualstudio.com/download Download Visual S.. 2021. 9. 9. 이전 1 2 다음