React 개발 환경 세팅 및 실행, 레이아웃(JSX), state

 

 

 

 

 

 

 

React 개발환경 세팅

nodejs 검색 - 왼쪽 설치 

vscode 검색 - 설치 

작업할 폴더 생성 - shift 우클릭 - powershell창 열기 

- npx create-react-app 프로젝트명 

* 오류발생시 : 윈도우 검색 - powershell - 우클릭 - 관리자 권한으로 실행 - Set-ExecutionPolicy Unrestricted 입력

vscode - 해당 폴더 열기 

node_modules : 라이브러리 모아놓은 곳

public : static 파일 모아놓은 곳(img)

src : 소스코드 보관함

package.json : 프로젝트 정보

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React 실행 

실행 : terminal - new terminal - npm start 

* App.js : 메인 페이지

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React 레이아웃 (JSX 문법)

* html 내용은 return () 안에다가 짜야한다

JSX : js파일에서 쓰는 html 대용품

* App.js에서 App.css파일을 가져오려면 className을 설정한 후, 해당 내용을 App.css파일에 작성

import './App.css' 도 해줘야 한다

 

 

중괄호 문법 : 변수명을 중괄호 안에 입력하면, 알아서 값을 가져온다 (거의 모든곳에서 사용 가능)

해당하는 역할을 data binding이라 한다

 

 

 

css를 css파일에서 불러올 수 있지만, 직접 부여할 수도 있다.

style = {{이름 : '값'}} 형식으로 넣어줘야 한다 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React state 

* return ()안에는 하나의 영역(<div>)만 있어야 한다

state : 중요한 자료를 저장하는 변수 문법 (자료를 잠깐 보관)

* let이나 var로 변수를 저장하면 되는데, state를 쓰는 이유는 변수 내용이 변경되었을 때

state는 자동으로 html에 반연되어 재랜더링 해준다

사용법 : let [작명(a), 작명(b)] = useState('내용') : useState는 import 해야한다

{a} : 해당 내용을 불러옴

b : state 변경을 도와주는 함수

 

* Destructuring 문법 : let [a, c] = [1, 2]  //a = 1, b = 2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React state (버튼 및 개수 추가 기능)

* /* eslint-disable */ : 노란색 warning 메시지를 끄는 기능(Lint 끄는 기능)

* onclick 안에는 함수만 가능

* state 변경하는법 : state변경함수(새로운 state)

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React state (array 변경)

* array 데이터는 내용을 저장하지 않고, 경로만 저장

따라서 해당내용을 만드려면 경로(화살표)를 바꿔줘야 한다 

[...변수명] : 해당 변수를 화살표를 벗기고 다시 씌운다.

 

실행 결과