리액트는 자바 스크립트 기반
JSX라는 문법 사용
javascript + XML(태그를 사용자가 임의로 만들 수 있음 ex) <\STUDENT><\/STUDENT>) 합쳐진 것
사용자에게 보여줄 화면을 서버측에서 구현할 것이냐 클라이언트에서 할 것이냐로 나뉨
버츄얼돔에서 미리 만들어보고 트리 구조 수정 및 완료를 마치고나서야 사용자에게 렌더링을 해줌
component는 jsp의 include처럼 하나하나 구성해놓고 끼워넣고 수정하는 방식!
그래서 똑같은 것을 여러번 반복할 때 리액트를 사용하는 것이 유리함.
선언형 프로그래밍: 위에서부터 밑으로 내려가는 흐름대로 프로그래밍이 이루어졌었지만 개발자가 원하는 결과를 선언하면 그에 맞게 실행됨
ex) 버튼을 클릭하면 다음 그림 보여줘 -> 이대로 실행됨
독단적으로 자바스크립트를 실행할 수 있는 곳이 Node.js
수업에선 yarn설치 안 했음
Node.js 설치
안정적인 LTS 버전을 다운로드(버전은 6개월에 한 번씩 업데이트 됨)
설치 창 나오면 아무것도 설정하지 않고 next만 누름
cmd창 열어서 노드 버전 확인되는지 확인
React 설치
워크스페이스 폴더 만듦: 대문자, 띄어쓰기 안 됨
VScode 실행하고 방금 만든 워크스페이스 폴더 열기
상단에서 new Terminal 해도 되고
ctrl + j하면 터미널 여닫힘 가능
터미널의 설정값 바꾸기
powershell은 삭제해도 됨
npx -v 쳐서 버전확인
내부명령이 아니라는 오류가 뜨면 따로 설치를 해줘야함
설치가 잘 되었는지 확인
my-app01 이라는 프로젝트 앱을 따로 만들어주고 y눌러서 앱 설치 해줌
만든 프로젝트로 들어가기
여기서 사용하는 모듈들이 모아져 있음
대부분의 데이터 형태가 json으로 되어있음
보통 별칭을 부여하여 간결한 코드를 할 수 있도록 함
사용자가 볼 수 있게 모델링 해주는 것이 render(rendering)
확장자명이 없는 애들은 확장자 js가 생략된 것임
from은 위치를 알려주는 것임
이런식으로 되는 것임
클래스를 예약어로 사용하기 때문에 className으로 속성을 넣어줘야함
JSX
빨간곳은 js
안에 들어가 있는 초록부분은 html
이런 부분을 JSX라고 함
대체적으로 div를 많이 사용하고 Fragment로 간혹 씀
!!return문에 괄호 무조건 써줘야함!!
