2023/07/18__React_1

HELLICAT 2023. 7. 18. 18:30

2023. 7. 18. 18:30

리액트 (React) 살펴보기

리액트

페이스북에서 만든 자바스크립트 UI 라이브러리
컴포넌트(사용자 정의태그)를 사용하여 가독성 및 재사용성 향상
https://reactjs.org

툴 체인(Tool Chain)

리액트 프로젝트 개발 시 목표에 따라 필요한 여러 가지 개발 환경 및 도구를 모아 한번에 제공하는 도구

리액트 설치

npm i create-react-app
create-react-app -V 설치 확인

npm VS npx

npm : 프로그램설치
npx :해당 프로그램을 한번만 설치 후 자동 삭제
컴퓨터 공간 낭비 방지
설치시 마다 새로 다운로드 받기 때문에 항상 최신 상태 유지

프로젝트 생성 명령 입력

디렉토리명으로 react 사용불가

create-react-app [프로젝트명]

create-react-app . (마침표)(현재 디렉토리에 설치)

코드 변경 실습

public 디렉토리

수정하지 않음

publick > index.html

코드 중간 <div id='root'></div>에 앱 작성 코드 출력

<body>
	<noscript> You need to enable JavaScript to run this app. </noscript>
    <div id='root'></div>

수정 가능하며 수정시 'src/index.js' 파일 코드 수정
index.js: 앱의 진입점 역할

const root = ReactDOM.createRoot(document.getElementById('root'));

src > index.css

문서전체

src > App.css

App.js안에 작성된 컴포넌트 디자인

배포하기

개발된 앱을 실제 웹이나 모바일에서 사용할 파일로 변환 -- 컴파일
불필요한 코드 삭제로 파일 용량 경량화

빌드된 파일 실행

build 디렉토리의 파일 실행
-s:build 디렉토리를 루트로 지정

안되는 경우 2가지

윈도우 - powshell
npm i -g serve를 안해줬거나

컴포넌트

함수방식 컴포넌트

function Name(){
	return(
    	내용
    )
}

클래스 방식 컴포넌트

컴포넌트 이름은 반드시 대문자로 시작

render 함수
자바스크립트 최신 스펙에서는 class 문법에서 function 생략

import React {Component} from 'react'

class Name extends Component {
	 render(){
    	 return(
        	 내용
        )
    }
}
// return
// 출력할 내용작성
// 컴포넌트 만들 때 최상위 디렉토리는 반드시 1개 이어야 함 (1개 요소만 리턴 가능)

App.js

사용자 정의 컴포넌트
유사 자바스크립트(순수 자바스크립트(x))
코드를 쉽게 작성할 수 있도록 JSX언어 사용

JSX(Javascript XML)

자바스크립트 코드 작성 시 따옴표 사용 등 까다로운 문법을 쉽게 작성
메타(페이스북)에서 만든 언어
JSX로 코드 작성 시 Create React App 이 자바스크립트 코드로 변환

컴포넌트 파일 분리하기

클래스 로딩(component > name.js)

리액트 코딩 시 필수 코드

import React , {Component} from 'react

export (component > name.js)

import 할 파일의 변수나 함수 등을 외부에서 사용할 수 있도록 허용

export default TOC

파일 호출(App.js)

App.js 파일 상단에 외부에서 가져올 파일 import

import TOC from './component/TOC'

Props 와 State

Props

html : < element attribute = ' value '
react , vue : < Compoment props = 'variable'

State

vue - vuex
react - redux

html의 속성 (attribute)

https://reactjs.org/docs/components-and-props.html
같은 태그 (또는 컴포넌트)라도 다르게 사용 가능 - 재사용성 향상

728x90

'React > ReactJS' 카테고리의 다른 글

2023/07/27__ReactJS(5) (0)	2023.07.27
2023/07/24__ReactJS(4) (0)	2023.07.24
2023/07/21__ReactJS (0)	2023.07.21
2023/07/20__ReactJS(3) (0)	2023.07.20
2023/07/19__ReactJS(2) (0)	2023.07.19

HELLICAT