1. 리액트란?
리액트 : 사용자 컴포넌트를 만들기위한 자바스크립트 라이브러리
2. 리액트를 쓰려면?
환경 : 리액트를 쓰려면 노드가 필요
3. 노드는 무엇인가?
버전 : v20.13.1
https://nodejs.org/en/download/prebuilt-installer
노드 설치 되었는 지 확인 : cmd에서 node -v 입력, npm -v 입력
npm : Node Package Manager, JavaScript 환경에서 코드를 모듈화하고 공유하기 위한 패키지 관리 도구
Node.js를 설치하면 자동으로 npm이 설치가 된다.
*리액트 설치 방법
1) 전역설치
npm install -g create-react-app : create-react-app 도구로 전역에서 명령어를 사용 가능
'create-react-app .' : 현재 폴더에 create-react-app 설치
'create-react-app 하위폴더명' : 현재 폴더에 하위 폴더를 만들어서 create-react-app 설치
2) 로컬설치
npx create-react-app . 명령어를 입력
npx create-react-app : npx를 사용하여 create-react-app을 설치하지 않고 직접 실행하는 명령어
명령어는 로컬에 create-react-app을 설치하지 않고, npm 레지스트리에서 create-react-app 패키지를 다운로드하여 실행합니다. 이렇게 하면 명령을 실행하는 동안에만 create-react-app을 사용할 수 있습니다. 즉, 전역으로 create-react-app을 설치하지 않고도 프로젝트마다 create-react-app을 실행할 수 있습니다. 프로젝트를 공유할 때 불필요한 전역 설치를 피할 수 있는 장점이 있습니다.
npx : Node Package Runner의 약자로, npm 패키지를 실행하는 데 사용되는 도구
npx를 사용하면 로컬에 설치되어 있지 않은 패키지를 간편하게 실행 가능
-> 에러... 지우고 다시 설치
npm uninstall -g create-react-app : 전역으로 설치된 create-react-app 패키지를 삭제하는 명령어
npm install -g create-react-app : Node.js 패키지 매니저(NPM)를 사용하여 전역(global)으로 create-react-app 패키지를 설치하는 명령어, 새 프로젝트를 설정하는 명령여('create-react-app')을 제공 (전역으로 설치되니 비추)
- npx 사용: npx는 npm 패키지를 로컬에 설치하지 않고도 실행할 수 있게 해주는 도구입니다.
- 즉시 실행: create-react-app 패키지가 이미 시스템에 설치되어 있지 않아도 최신 버전을 바로 사용할 수 있습니다.
- 현재 디렉토리에 설치: .은 현재 디렉토리를 의미하며, 이 명령어는 React 애플리케이션을 현재 디렉토리에 생성합니다.
리액트 실행 명령어 : npm start
리액트 구조 : App.js -> index.js -> index.html
html 파일 안에 태그가 있음
그 태그에 변수dom을 렌더링함 (index.js)
변수dom안에는 또 사용자정의태그.js파일이 있음
리액트 기본구조 : Single Page Application
서버로부터 새로운 페이지를 불러 오지 않고 현재의 페이지를 동적으로 다시 렌더링
JSX : JavaScript에 XML을 추가한 확장문법
하나의 파일에 자바스크립트와 HTML을 동시에 작성
(가독성이 높고 작성하기 쉬움)
JSX 사용 규칙
1) 여러 요소가 있다면 반드시 부모요소로 감싸야한다!
React.StrictMode가 있으면 코드가 2번 실행된다. 안전을 위해 한번 실행해보고 다시 실행하는거라서?
estension 설치
ES7+ React/Redux/React-Native snippets
props : 상위 컴포넌트에서 하위 컴포넌트에 데이터 전달 시 사용, 객체 형식으로 받아옴
자바스크립트에서 객체는 키와 데이터로 이루어져있음
데이터를 보낼 때 : 출력되는 하위 컴포넌트의 시작태그에 키명="데이터"를 입력데이터를 받을 때 :
파라미터에 props를 적고 데이터를 출력할 때는 {props.키명}
기본 데이터를 넣을 때 (default props) : 상위 컴포넌트에서 데이터를 받지 못 했을 떄 자동 사용되어지는 props
export default 위에 함수명.defaultProps = {키명:"데이터명". ...}
변수의 값을 변경해도 화면의 값은 안 바뀐다 -> 바뀐 값으로 출력시켜줄 수 있는 변수 생성 기능 : useState
import {useState} from 'react'를 최상단에 작성해줄것
문법 : const [state, setState] = useState(초기값)
예시 : const [num, setNum] = useState(0)
State : 컴포넌트 내부에서 관리되어 변경이 가능한 데이터
-> 즉, 바뀐 값으로 화면에 출력할 수 있는 데이터
일반 변수와 다르게 값이 변하면 화면이 렌더링된다. (함수는 setState()를 사용, ex) set변수명() )
React Hook : react에서 함수 컴포넌트에 적용되는 여러가지 기능
useState : state 변수를 생성할수 있는 내장형 함수 훅
state 변수는 값이 바뀔 때마다 바뀌어진 값으로 화면에 출력할 수 있는 변수
setState는 state값을 바꿀 수 있는 함수, 특징으로 close 함수인데 의미는 제일 마지막에 실행되는 함수이다.
useEffect : 컴포넌트의 LifeCycle 기반으로 특정 로직을 실행시키는 내장형 함수 훅
*왜 useEffect를 사용할 수 밖에 없느냐? state변수를 set하는 함수가 항상 로직에서 최종 단계에서 실행되므로 중간 로직을 건너뛸 수 있음. 그러므로 useEffect를 사용하면 state변수가 set하고 나서 값이 바뀌고 나서 실행시킬 수 있도록 해준다.
(useEffect는 Mount와 Update 단계라 할 수 있다. 처음에 한 번 실행되고 state 값이 바뀔 때마다 실행된다.)
useEffect(function(){
로직...
}, []) 위 구조에서 []는 의존성 배열로 특정 state 값의 변경에 의해서만 실행할 수 있게 도와줌 (컴포넌트 첫 렌더링 때 실행은 됨)
LifeCycle
- Mount : 맨 처음 컴포넌트가 사용자에게 보여졌을 때
- Update : state 값이 바뀌어 다른 데이터가 사용자에게 보여졌을 때
- UnMount : 컴포넌트가 사용자에게 보여지지 않을 때
*Ctrl + C
터미널에서 입력, 실행 중인 프로세스를 중단하고 새로운 프롬프트를 표시합니다. 이 단축키는 커서가 비정상적으로 동작할 때 유용합니다.
*참조
'Library > React' 카테고리의 다른 글
React와 Spring 사이에서 데이터 연동 (0) | 2024.06.12 |
---|---|
[React] Router (0) | 2024.06.10 |
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!