웹개발 배워보자! - 리액트(1) | 리액트 환경 셋팅과 간단한 문법 조금

리액트를 쓰는 이유 

1. 싱글 페이지 어플리케이션을 만들려고 만든다 : 앱처럼 부드럽게 동작하는 웹페이지

2. 제일 오래됐고 유저가 많다

3. html 재사용이 편리하다

4. 리액트를 통해 앱개발도 가능하다

5. 요즘 대부분의 회사는 리액트를 사용한다.

 

개발 환경 셋팅

1. Node.js 설치

2. vscode 설치

 

리액트 프로젝트 실행하기

리액트를 사용할 폴더를 하나 만들어주고,

시프트 우클릭을 한 후 여기에 powershell열기를 클릭

뜬 창에 위 명령어를 입력한다 이후에 vscode에서 오픈폴더를 눌러 폴더를 연후에 app.js(메인페이지)에서 코드를 짜면 된다. 이는 create-reacte-app 라이브러리를 이용하여 필요한 파일들을 한번에 설치해주는 것인데 이는 Node.js를 설치할때 같이 설치된다.

 

App.js의 코드는 index.js가 index.html로 연결시켜주기 때문에 바로바로 적용이 된다.

 

npm start를 터미널에 입력하여 미리보기를 볼 수 있다.

 

js 내에서도 div, p 태그등을 사용할 수 있다.

 

이는 리액트에서 사용하는 언어가 JSX라는 언어를 사용하기 때문에 사용 가능하다.

CSS를 연결할때 VUSGKRP import를 사용하여 불러올 수 있다.

 

- 레이아웃을 만들 때 쓰는 JSX 문법 3개

 

1. 클래스를 넣을땐 class를 사용하지 않고, className을 사용한다.

왜냐하면 js에서 클래스를 만들 때 사용하는 class와 겹치기 때문이다.

 

2. 데이터바인딩 : 리액트에서 변수를 html 구조 사이에 넣을때 {}를 사용하여 넣을 수 있다.

3. jsx 상에서 스타일 속성을 사용할려면 ""가 아니라 {}를 사용하고 객체형으로 값을 넣어줘야 한다.

- 기호는 사용하지 못한다.

 

- 중요한 데이터는 state에..!

자료를 잠깐 보관할때는 state를 사용할 수 있다.

import  {useState} from 'react'; 

로 불러와 사용한다. 그 후에 아래와 같이 사용한다.

a : state에 보관한 자료

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

 

일반 변수의 내용이 갑자기 변경되면 html에 자동으로 반영되지 않는다.

> state는 자동으로 html의 내용이 변경이 된다. 즉, html이 자동으로 랜더링된다.