React
사용자 인터페이스를 만들기 위한 js 라이브러리
props
state
이벤트
컴포넌트
컴포넌트(함수형, 클래스형)
배열(map, filter) 렌더링하기
React의 장점
- 컴포넌트 단위 개발 (생산성 향상, 유지보수 용이)
- 싱글페이지 어플리케이션 (사용자 경험 개선)
- 높은 인지도
JSX
react에서 생김새를 정의할 때 사용하는 문법
- 닫혀야 하는 태그 (태그는 꼭 닫혀야한다.)
- 하나의 태그로 감싸져 있어야 한다.
- jsx안에 자바스크립트 값 사용은 {}로 감싼다.
- class 지정은 classname 속성을 사용한다.
- 주석은 {/ 주석내용 /} 으로 작성한다.
node.js 설치방법
18.12.1 LTS가 안정적인 버전
React 사용방법
프로젝트 생성하기
- d 드라이브로 전환 :
d:- 프로젝트 생성할 경로 입력 : ex)
D:\01-STUDY\kyh\09.REACT npx create-react-app 프로젝트 이름완료
C:\Users\GreenArt>node -v
v18.12.1
C:\Users\GreenArt>d:
D:\>cd D:\01-STUDY\kyh\09.REACT
D:\01-STUDY\kyh\09.REACT>npx create-react-app begin-react
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y를 완료하면 설정 완료
터미널 실행
Terminal -> New Terminal -> npm start 입력
환경변수 추가
내 pc 검색 → 오른쪽 마우스 클릭 후 속성 → 환경 변수
→ 시스템 변수에서 Path 편집 → C 드라이브에 있는 nodejs 파일 경로 추가
React 주의할 점
- 하나의 태그로 감싸야한다.
- 반드시 태그를 닫아줘야한다.
ex)
<img src={logo} className="App-logo" alt="logo" />
import React from 'react';
function Hello(){
return (
<>
<div>안녕하세요</div>
<p>재미있는 리액트</p>
</>
)
}
export default Hello;- 태그를 두개 이상 작성할 때는 소괄호로 한번 감싸줘야한다.
- 태그를 두개 이상 작성할 때는 하나의 태그로 감싸줘야한다.
- css를 입력시켜야하는데 태그로 인해 입력이 안 될 수 있을 때에는 빈태그로도 감싸줄 수 있다.
