React.js / 01 / 기초-1

⚛️ React.js

• 자바스크립트 라이브러리 중 하나

• 사용자 컴퍼넌트를 만들기 위한 JS 라이브러리

• ⭐싱글 페이지 어플리케이션 (비동기통신)
  : 서버로부터 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 불러와서 유저와 소통 ≒ 인스타 피드

[📚용어]

라이브러리 : 사용자가 호출, 사용자가 제어
필요할 때마다, 내가 도서관에 가서 책을 빌려 읽고, 필요 없으면 내가 반납

프레임워크 : 사용자가 호출, 제공자가 제어
학원에 가면 정해진 교과과정과 규칙에 따라 수업을 듣는 것

---

🧱 사용자 인터페이스
= 사용자 정의태그
= 사용자 컴포넌트

🧩 컴포넌트 : React에서 앱을 이루는 가장 작은 단위(블록)≒ 레고 블록

🧩 React는 컴포넌트 기반의 구조

🧩 React는 모든 페이지가 컴포넌트로 이뤄져있음

🧩 각 컴포넌트는 다른 컴포넌트와 조합, 구성 가능

---

[📚개념]

✔️Node.js : JS를 사용하여 서버를 만들고 관리할 수 있는 환경을 제공

* react 에서 파일명 소문자로 작성 <=> 컴포넌트 이름은 대문자로 시작

* single page application : 리액트 기본구조이자 가장 큰 특징

* react 프로젝트 中 창 닫았을 경우
- 서버까지 종료 시 => npm start
- 서버 켜져 있을 경우 => 로컬 호스트 주소 입력

---

* react 설치 명령어

✔️리액트 프로젝트 설치 명령
npx create-react-app .


❌ 안될때
npm uninstall -g create-react-app
npm install -g create-react-app


✔️리엑트 프로젝트 실행
npm start

✔️리엑트 프로젝트 종료 
ctrl + c 



🔵 추가 명령어
cd : 경로 바꾸기
ls : 하위 경로 확인

---

✅ JSX ( JS + XML )

• 하나의 파일에 자바스크립트와 HTML 동시에 작성

• 사용자 정의 태그는 JSX 문법으로 작성 됨

• 동시에 작성 하니까, 가독성 ↑ 작성하기 쉽다(?)

• 출력 태그에 해당하는 규칙이라고 보면 된다.

---

[⭐⭐] JSX 사용 규칙 4개

① 하나 요소 이상 출력(사용)할경우,
무조건 부모요소로 감싸야한다

---

② 표현식 사용 가능

• html 내부에서 자바스크립트 문법을 사용할 수 있음
• 사용할 경우 { } 👈 써서 JS문법 썼다고 표기
• 모든 문법 사용 ❌❌( 함수호출, 변수 설정 가능 )
• 삼항연산자를 정말 많이 사용

---

③ class ▶ className으로 씀

• 키워드명만 이렇게 바꼈음 . .
  

---

④ 모든 태그는 열린 태그와 닫힌 태그가 존재

• 홀태그도 똑같이 적용 됨 (br, input 태그 등)

---

✅ JSX 삼항연산자

---

✔️ JSX 스타일 적용법