React(리액트) 기초

React는 사용자 인터페이스를 만들기 위한 Javascript이다._리액트 공식 홈페이지

 

리액트를 왜 사용해야 하는가?

요즘의 웹페이지는 단순하게 홈페이지만 보여주는 것이 아니라 유저와 상호 작용을 한다.

유저와의 상호작용이 많지 않다면 Html과 css만으로도 웹페이지 관리는 충분하다.

하지만 유튜브와 같이 웹페이지와 유저와의 상호작용이 많다면 상호작용을 하기 위한 작업을

관리하기에 많이 까다로울 것이다. 그래서 복잡한 상호작용을 최소화하고, 기능 개발에만

집중할 수 있는 방법을 고민하다가 탄생한 게 리액트(React), 뷰(View), 앵귤러(Angular)이다.

 

리액트는 Component 단위로 개발한다.

Component : 하나의 의미를 가진 독립적인 단위 모듈

//나만의 HTML 태그라고 할 수 있다.

코드가 직관적이고 코드의 재사용률이 올라간다.

 

리액트 사용하기 전 알아야 할 것 두 가지.

1. 리액트는 기본적으로 ES6문법을 사용한다.

모든 문법을 기억할 필요는 없지만 아래의 6가지는 기억해두자.

spread operator //...
rest parameters //인자에 들어가는 값(...)

default parameters

//인자가 undefined일 때 정해주는 초기값 (a, b = 1)
template literals

//`${}`
arrow function

// =>
for-of loop

//for(let el of arr)

 

2. 자바스크립트의 확장 문법 JSX(Javascript XML)

***추후 블로깅

리액트 설치하기

터미널을 열고 설치하고자 하는 폴더로 이동한 후

아래의 순서대로 코드를 실행한다.
npx create-react-app my-app
//my-app = 폴더이름
cd my-app
//폴더로 이동
npm start

실행 후 http://localhost:3000에서 실행 결과를 확인할 수 있다.

 

리액트 시작하기

리액트 설치예제

처음 리액트를 설치하고 나면 src폴더에 App.js파일과 index.js파일이 보인다.

 

작업을 시작할 때 App.js에 import React from 'react'; 를 추가해준다.

//이 파일은 리액트를 사용할 수 있다.

 



그 후 5 ~ 24번째 줄을 지운 후에 작업을 시작할 수 있다.

작업을 한 뒤 새로고침을 하면 http://localhost:3000에서 작업내용을 볼 수 있다.

바로 반영이 되지 않는다면 새로고침을 한번 눌러준다.

 

리액트는 여기서 실습해볼 수 있다. codesandbox.io

CodeSandbox

구글 아이디를 통해 쉽게 로그인할 수 있다.

모든 블로깅 자료는 codesandbox.io에서 실습해 본 뒤 포스팅할 예정이다.