입문 강의 - 생코, React

# 노트 

 

리액트 핵심 => 사용자 정의 태그 만들기 
문법 2개 
class vs function 
요즘은 function으로 만드는게 흔함. (예전 수업을 찾아보면 class 방법 배울 수 있음)

npm start -> 3000번 포트에서 브라우저 실행

src 폴더 안에 index.js = 입구 파일
index.js를 받고 이 안에 있는대로 동작하게 됨

<배포>
npm run build
-> build 폴더가 생성됨

npx serve -s build 
-s 옵션: 사용자가 어떤 경로로 들어오든 간에 index.js 파일 서비스해줌
build 파일 안의 index.js 서비스해줌 

react에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야 핢 
사용자 정의 태그라는 표현 대신 컴포넌트라는 표현을 사용함. 
컴포넌트 공유 가능 

리액트는 속성을 prop이라고 부름 

list 요소 하나씩 가져올 때 map 을 많이 사용함

리액트는 자동으로 생성된 tag의 경우에는 key라는 약속된 tag를 부여해야 함.

event.preventDefault() => 클릭해도 reload 방지 

event.target => event를 발생시킨 tag를 가리킴. tag에 부여된 id를 가져오려면 
event.target.id

prop과 state
prop은 컴포넌트를 사용하는 외부자를 위한 데이터
state는 컴포넌트를 만드는 내부자를 위한 데이터 

useState => 0번 상태의 값을 읽을 때, 1번은 상태의 값을 변경할 때 사용하는 함수

 

리액트 입문 강의 (create 전까지)

https://www.youtube.com/watch?v=kctNCMFxciQ&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=8