SpringBoot

ReactJS

김윤지. 2024. 10. 29. 17:49

React 기초 문법 요약

1. React.DOM(tag,target)

2. tag 내부 변수선언 {변수}

3. return jsx를 인식 못 할 수 있으니 ( ) 감싸주기

4. return <div></div><div></div> 연속 사용 못함

5. 반드시 닫는 태그 작성해야 함

6. style 속성은 문자열로 표현 못 함: {prop:val,prop:val..} 

7.component정의하기

  - 함수로 정의하기: Hooks 기능을 통해 state와 라이프사이클 사용가능->클래스컴포넌트와 완전 똑같이 사용은 못함

  - 클래스로 정의하기:state와 라이프사이클 사용가능

  - 화살표 함수로 정의하기

8.상태 정의하기

  - this.state,  this.setState() , contructor 초기화

9.이벤트구현

 -onclick ---> onClick={ }로 표현

 -render() 밖에 함수 구현 시 this전달을 위한 bind 사용

 

1. 환경설정

리액트 홈페이지(https://ko.reactjs.org/docs/create-a-new-react-app.html)에서 create a new react app 메뉴를 클릭하면 다음과 같은 화면이 나온다.

node와 npm 이 필요하며, 위 그림에 링크를 따라 설치를 진행한다.

둘 중 하나를 선택하고, 설치하면 node와 npm을 한꺼번에 설치해 준다.

-설치 후 버전 확인하기


-실행하기



실행 화면

- 실행시 아래와 같은 오류가 발생하는 경우 node_modules가 생성되지 않아서 발생하는 경우이다.

Package.json에 설정된 라이브러리 목록들이 설치되면 node_modules 폴더에 관리되는데 이 폴더가 없을 경우 필요한 라이브러리가 없어서 오류가 발생하게 된다. 

PS C:\Users\kang9\수업자료\JAVASCRIPT\react_edu_workspace\chap02_jsx> npm start      

 

> chap02_jsx@0.1.0 start

> react-scripts start

 

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

npm install 명령어를 실행하면 설치가 진행된다. 

 

리액트에서 사용되는 NodeJS 명령어

1. Node.js 설치 확인

Node.js와 npm(Node Package Manager)이 제대로 설치되어 있는지 확인하는 명령어

node -v

npm -v

 

2. Node.js 프로젝트 초기화

   새로운 Node.js 프로젝트를 생성할 때 사용하는 명령어

npm init

-y 옵션을 사용하면 기본값으로 package.json 파일을 자동 생성

npm init -y

 

3. 의존성 설치

프로젝트에서 사용할 패키지를 설치하는 명령어

npm install <package-name>

 

4. 글로벌 패키지 설치

npm 패키지를 전역적으로 설치할 때 사용하는 명령어

C:\Users\user\AppData\Roaming\npm폴더가 생성됨

npm install -g <package-name>

 

5. 로컬 서버 실행 (React 프로젝트)

React 프로젝트에서 로컬 개발 서버를 실행하는 명령어

npm start

 

6. 빌드

React 프로젝트를 프로덕션 환경에 배포할 수 있도록 빌드하는 명령어

npm run build

 

7. 테스트 실행

테스트 스크립트를 실행하는 명령어

npm test

 

8. 패키지 업데이트

프로젝트의 모든 패키지를 최신 버전으로 업데이트

npm update

 

9. 의존성 삭제

설치된 패키지를 삭제하는 명령어

npm uninstall <package-name>

 

10. 캐시 정리

npm 캐시를 정리할 때 사용하는 명령어

npm cache clean --force

 

11. React 프로젝트 생성

create-react-app 도구를 사용하여 새로운 React 프로젝트를 생성하는 명령어

npx create-react-app <project-name>

 

12. ESLint 및 Prettier 설정

React 프로젝트에 ESLint와 Prettier를 설정할 때 사용

npm install --save-dev eslint prettier

 

13. 환경 변수 설정

React에서 환경 변수를 설정하려면 .env 파일에 변수 추가

<아두이노>

REACT_APP_API_URL=http://example.com/api

 

14. 환경 변수 로드

환경 변수를 로드하기 위해 dotenv 패키지를 설치하고, 프로젝트에 적용

npm install dotenv

 

dotenv를 적용하는 코드 예시

<javascript>

require('dotenv').config();



15. Node.js 서버 실행

Node.js 서버를 실행하는 명령어입니다

node <filename.js>

 

개발 모드에서 자동 재시작을 위해 nodemon 패키지를 사용 가능

npx nodemon <filename.js>

 

16. TypeScript 설정

React 프로젝트에 TypeScript를 설정할 때 사용하는 명령어

npx create-react-app <project-name> --template typescript



17. 프로젝트 클린업

프로젝트의 의존성 및 빌드 결과물을 정리하는 명령어

npm run clean

nodeJS PORT 변경하기

  • 기본 port는 3000으로 설정되어 있으며, 변경시 아래와 같이 package.json 파일에서 원하는 port번호로 변경하면 된다.

React 기초

1. React란?

- React는 페이스북에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위해 사용.

- 프레임워크란 :  원하는 기능 구현에 집중하여 개발할 수 있도록, 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대.

- 라이브러리란: 특정기능을 모아둔 코드, 함수들의 집합, 코드작성시 활용 가능한 도구들의 집합.

- react는 내장기능이 부족하고, 외부 패키지에 의존하는 경우가 많으며, 프로그램 개발에 완벽한 생태계를 제공하지 않는다. 모든 프로젝트에 적절한 설계 시스템을 만들어야 하기에 프로젝트마다 코드가 달라보일수도 있다.

→ 리액트는 라이브러리, SSR방식을 지원하는 react기반의 프레임워크는 Next.JS가 있다.

  • React는 최신 흐름인 Front-end 와 Back-end 의 독립적 개발 및 SPA에 적합
  • 컴포넌트 기반의 구조와 다양한 생명주기 메서드, 훅 등을 이용하여 효율적인 UI 개발이 가능.
  • 추가적으로, React Router와 Redux를 통해 라우팅과 상태 관리를 더욱 체계적으로 관리.

 

Virtual DOM: 실제 DOM 대신 가상의 DOM을 사용하여, 변경 사항을 효율적으로 업데이트한다.

 

  • 컴포넌트 기반: UI를 작은 컴포넌트 단위로 나누어 재사용성과 유지보수성을 높임
  • 단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달되며, 데이터 변경은 UI에 반영됨

2. React 설치 및 환경 설정

 - Node.js 설치: Node.js와 npm(Node Package Manager)을 설치.

 - Create React App 사용:

 npx create-react-app my-app

 cd my-app

 npm start

3. React 프로젝트 구조

  - public/: 정적 파일(HTML, 이미지 등)을 저장

  •  index.html: 애플리케이션의 기본 HTML 파일.
  • src/: React 컴포넌트와 JavaScript 파일들이 위치
  •  index.js: React 애플리케이션(App.js)을 렌더링
  •  App.js: 주요 컴포넌트를 포함한 파일

4. JSX

  - JSX는 JavaScript를 확장한 문법으로, HTML과 유사한 문법을 사용하여 React  컴포넌트를 작성합니다.

  - JSX는 브라우저가 이해할 수 있는 JavaScript 코드로 변환됩니다.

 npm start

5. 컴포넌트

  - React의 핵심 개념으로, UI의 재사용을 가능하게 하며, 페이지 표현의 최소 단위

6. Props와 State

7. 이벤트 처리

  - React에서는 DOM 이벤트를 처리하기 위해 camelCase로 이벤트 핸들러를 정의

 

HTML의 기존 이벤트 방식

<button onclick="eventTest()"> 

event 

</button>

 

리액트에서 이벤트 방식

<button onClick={eventTest}> 

event 

</button>

 

onclick 이벤트가 onClick 카멜방식으로 작성하고 함수는 { }중괄호안에 작성한다. 

8. 컴포넌트 생명주기 (Lifecycle)

  • 클래스형 컴포넌트에서 중요한 생명주기 메서드
  • componentDidMount(): 컴포넌트가 처음 렌더링된 후 호출
  • componentDidUpdate(): 컴포넌트가 업데이트된 후 호출
  • componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출

9. 조건부 렌더링

  • 특정 조건에 따라 다른 컴포넌트를 렌더링한다.

10. 리스트와 Key

  • 여러 개의 아이템을 렌더링할 때는 리스트를 사용하며, 각 아이템에는 고유한 key가 필요

11. 폼과 입력 처리

  • React에서는 <input>, <textarea> 등의 폼 엘리먼트의 값을 컴포넌트 상태로 관리

12. 컴포넌트 간 데이터 전달

  • 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달 (Props): 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달
  • 상위 컴포넌트에서 하위 컴포넌트로 함수 전달 (Callback Props): 자식 컴포넌트에서 부모 컴포넌트의 상태를 변경 가능

13. React Router

  • React Router는 SPA에서 라우팅을 관리하는 데 사용

14. React Hooks

  • 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 하는 기능

 

15. Redux (Optional)

    • Redux: 애플리케이션의 상태를 전역적으로 관리하기 위한 라이브러리.
    • Action: 상태 변경을 설명하는 객체.
    • Reducer: 상태를 변경하는 함수.
    • Store: 애플리케이션의 전역 상태를 관리하는 객체.

16. 리액트 목적

    • React는 최신 흐름인 Front-end 와 Back-end 의 독립적 개발 및 SPA에 적합
    • 컴포넌트 기반의 구조와 다양한 생명주기 메서드, 훅 등을 이용하여 효율적인 UI 개발이 가능.
    • 추가적으로, React Router와 Redux를 통해 라우팅과 상태 관리를 더욱 체계적으로 관리.
저작자표시 (새창열림)