리액트 - 시작하기
커맨드 (터미널 열고닫기 : 단축키 ctrl + `)
시작하기(현재 디렉토리에 프로젝트를 생성)-> 개발에 필요한 파일들이 자동으로 생성됨
npm init react-app .
개발모드 실행 (브라우저에 바로 반영이 됨)
npm run start
개발모드 종료
ctrl + c
개발모드를 종료하면 브라우저에서 프로그램 종료됨
/src/App.js 에서 내용 수정하면 반영이 됨
html 이랑 비슷한 문서.. jsx 라고 한다. (나중에 추가로 다루기로)
리액트 개발자 도구 (크롬 확장 프로그램)
components, profiler 탭이 추가되었다. 리액트로 된 페이지에서만 보인다
리액트 프로젝트가 실행되면 브라우저는 index.html 파일을 열고 → index.js 코드를 실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( // 그려주는 메소드
<h1>안녕 리액투~!</h1>, // 새로운 h1 태그를 만들어서 첫번째 아규먼트로 받는다.
document.getElementById('root') // root ID 를 갖고있는 html요소가 두번째 아규먼트로 사용된다. 즉 첫번째 아규먼트를 두번째 아규먼트가 접근한 요소에 집어넣는다
);JSX : 자바스크립트의 확장 문법
html 태그 이름을 완전히 그대로 쓰지는 못함
class -> className
for ->htmlFor
이벤트 핸들러 이름도 조금씩 다르다 (camelCase로 써주기)
onblur / onBlur
onfocus / onFocus
onmousedown / onMouseDown
JSX 문법으로 html 태그를 작성할때는 반드시 하나의 감싸진 태그를 작성해야한다.
<></> : <Fragment></Fragment> 의 축약형 코드
const root = ReactDOM.createRoot(document.getElementById('root'));
const product = 'Macbook';
const model = 'Air';
const item = product + model;
const imgUrl = `~~~`;
function handleClick(){
alert('곧 도착합니다!');
}
root.render(
<>
<h1>나만의 {item} 주문하기</h1>
<img src={imgUrl} alt="제품 사진"></img>
<button onClick={handleClick}>확인</button>
</>,
document.getElementById('root')
);
${변수명} 사용하는것 대신 {변수명}으로 비슷하게 쓸 수 있다
{ }안에서 변수 + 변수 로도 표현할 수 있지만 중괄호 안의 표현식은 가능한 간략하게 적도록 한다.
img src="url주소" 대신 { url주소 }로
addEventListenr 대신 태그에 직접 속성 추가하기.
onclick 이 아니라 onClick으로 해야 유효하다.