기초 4강 정리 1. 이벤트 리스너 사용하는 방법 1) 원하는 버튼에 onClick = { 클릭시 실행할 함수 } 작성 a. 이때, 직접 함수를 작성하거나 ex. 함수명() b. 콜백 함수를 작성할 수 있음. ex. ()=> { 실행할 내용 } - 이걸 많이 사용하는 듯. c. 실제 작성 코드 { 글제목[0] } {} } >👍 0 2월 17일 발행 cf. 직접 함수 작성할 때, 바로 실행하려면 함수명() 버튼 누르면 실행 등과 같이 어떤 동작 다음에 실행이면 ()없애야 함. 2. state 와 결합하여 사용 1) 좋아요 이모티콘을 누를 때마다 추천 수가 증가하게 만들고자 함. ▶ 자주 바뀌는, 중요한 변수 2) import 문 수정 ▶ let [ a, b ] = useState(); 초기값을 0으로 설정..
1. 실행화면 더보기 실행 화면 2. 코드 import React, { useState} from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '광교 횟집 추천']); return ( 개발 Blog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 18일 발행 { 글제목[2] } 2월 19일 발행 ); } export default App; 3. 기타 ▶ 터미널에 뜨는 warning - eslint가 잡아주는 문법 체크 사항(변수 써두고 안 사용했어요~ 등) 보기 싫으면 import 보다 위에 eslint-..
기초 2강 1. 리액트 개발환경, HTML과 유사하다!! 다만 문법에서 살짝 차이 있음. 1) 시멘틱 태그 그대로 사용 가능 2) 문법적 차이 a. class= " " 대신 className = " " b. 하이픈(-) 안쓰고 카멜표기법 사용 c. 중괄호의 사용! { } 2. 중괄호의 사용 1) 이를 사용함으로 데이터 바인딩이 매우 쉬워짐. - 변수명, 함수, 이미지, 클래스명 등 function App() { let posts = '강남고기 맛집'; //변수에 데이터 저장 return ( 개발 Blog { posts } 2월 17일 발행 ); } ▶ 원래였다면 document.getElementById().src = ~~ 이렇게 길었을텐데 매우 짧아진 것을 볼 수 있음. 3. 스타일 넣고 싶다면? st..
