모각소 5주차 <REACT>

1. React 시작하기

npm init react-app . → 프로젝트 파일 생성

폴더명에 대문자 불가능

npm run start → 프로젝트(개발모드) 실행
(http://localhost:3000/ 로 이동함)
프로젝트를 실행하면 코드를 수정하는대로 알아서 업데이트 한다.

ctrl(^) + c → 개발모드 종료

2. JSX 문법

자바스크립트와 html 문법을 편리하게 쓸 수 있는 문법!
다만 모든 것을 똑같이 쓸 수 있는 것은 아니다.

ex) class
JS → 객체지향적 문법
html → class 속성

html의 class를 쓰기 위해서는 className 으로 바꿔 사용해줘야한다.

html의 for도 마찬가지

html의 for를 사용하기 위해서는 htmlFor 로 바꿔 사용해줘야 한다.

3. JSX 사용 시 꼭 지켜야 할 규칙

하나의 태그로 감싸서 작성해야 한다.

div 태그로 사용하고 싶지 않는 경우
→ <'Fragment> 를 사용하자!
(개발자 도구에서 불필요한 <'div> 태그를 안 볼 수 있다.)

이렇게 길게가 아닌 <> <'/> 만 써도 된다.

4. JSX에서 자바스크립트 사용하기

import ReactDOM from 'react-dom/client';

const product = 'Macbook';
function handleClick() {
  alert('곧 도착합니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
  <h1>나만의 {product} 주문하기</h1>
  <button onClick={handleClick}> 확인</button>
  </>
  );

function을 사용하려면 { } 로 묶어줘야한다.

5. 소감

지난 주에 공부했던 HTML의 복습과 react를 시작하는 하루였다. 본격적으로 react를 공부하고 사이트가 뚝딱뚝딱 만들어지는 것을 보니 뭔가 뿌듯하고 신기하다.