#1 React 기본( 정의/ 설치)
📍React란?
오픈소스 자바스크립트 라이브러리 중 하나로 사용자 인터페이스(UI)를 만들기 위해 사용된다.
라이브러리: 프로그래밍으로 무언가를 만들어낼 때 도움을 주는 기능을 묶어놓은 기능
📍React 장점
컴포넌트 존재 - 리액트 라이브러리에서 확인 가능
📍Single Page Application
기존 웹은 무언가 요청할 때마다 서버로부터 응답받은 리소스와 데이터를 화면에 렌더링하는 방식이다.
Single Page Application은 최초에 페이지 전체를 한 번 로드하고, 이후부터 특정 부분만 동적으로 다시 작성한다. 이런 개념을 적용한 프론트엔드 프레임워크가 등장했지만, app이 커지면 커질수록 데이터의 흐름을 파악하거나 디버깅을 하여 문제를 해결하는 것이 어려웠다고 한다.
이를 해결하는 것이 리액트
하나의 템플릿으로 전체 페이지를 보여줌
(index.html)하나로 js를 이용해서 동적으로 보여줌
📍React에서 중요한 3가지
☑️ 1. Component컴포넌트(독립적 단위의 소프트웨어 모듈) 기반인 리액트는 재사용성이 좋다.
개발 진행 시 독립적인 하나의 부품을 만들어 해당 모듈이 사용한 어느곳이든 재사용할 수 있게 한다.
☑️2. JSX리액트는 선언형(Declaritve) 패러다임을 따른다.
컴포넌트를 생성할 때 JSX 문법을 사용하여 생성한다. (이것은 JSX를 얻기 위해 따로 무언가 구현하지 않는다는 것을 의미한다.)
선언형 패러다임을 따르는 리액트는 화면 설계에 초점을 맞출 수 있게 도와주는데, 개발자의 고민거리를 줄여준다고 생각한다.
☑️ jsx : javascript syntac extension : 자바 스크립트의 확장 문법 : 리액트에서는 이를 이용해 화면에서 ui가 보이는 모습을 나타내준다
☑️ js와 html 구조를 같이 사용하기에 기본 ui에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현
- -> 바벨(babel)알아서 변경해준다
☑️3. Virtual DOM리액트는 가상 DOM을 사용한다. DOM은 정적인 화면에 적합한 모델이므로 페이지에서 많은 변화가 일어나는 지금의 앱에는 취약한 면이 있다. (DOM을 조작한다는 것은 매우 비싼 작업이기 때문이다.)
가상 DOM은 메모리 안에서 컴포넌트에 대한 정보를 비교하여 DOM트리가 업데이트 되어야 할 때만 반영하여 업데이트 해준다.
☑️ DOM
"문서 객체 모델"의 약자로, 웹 페이지의 구조를 표현하는 방식
HTML, XML 문서의 구성 요소를 객체로 표현하여 프로그래밍 언어(주로 JavaScript)가 이들 요소를 조작할 수 있도록 해줌
- 트리 구조: DOM은 문서의 요소들을 트리 구조로 나타냅니다. 각 요소는 노드(node)로 표현되며, 부모-자식 관계를 가집니다. 예를 들어, HTML 문서의 <html> 요소가 최상위 부모가 되고, 그 아래에 <head>, <body>와 같은 자식 요소들이 위치합니다.
- 동적 조작: JavaScript를 사용하여 DOM을 동적으로 수정할 수 있습니다. 예를 들어, 요소를 추가하거나 삭제하거나, 속성을 변경하는 등의 작업이 가능합니다.
- 이벤트 처리: DOM은 사용자와의 상호작용을 처리할 수 있는 이벤트를 정의하고, 이를 통해 웹 페이지의 동작을 제어할 수 있습니다.
예시
HTML 문서가 다음과 같다고 할 때:
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 문서의 내용입니다.</p>
</body>
</html>
이 문서는 다음과 같은 DOM 트리로 표현됩니다:
- html
- head
- title
- body
- h1
- p
📍설치 및 실행하기
1) 환경설정
- node.js
- vs 설치
2) 실행하기
☑️ 방법 1) 원하는 폴더 안에서 개발환경 세팅하기(초보)
- 사용자가 원하는 위치에서 폴더 생성가능
- 나중에 폴더를 함부로 옮기면 실행이 안됨
- 폴더 생성
- 해당 파일 내에서 세팅
- ----cmd에서
npx create-react-app .
npm start
☑️ 방법 2) 원하는 폴더 이름으로 개발환경 세팅하기
- 초보자가 나중에 폴더 위치 찾기 어려울수도 있음
- ----cmd에서
npx create-react-app 파일이름
cd 파일이름
npm start- npx: 노드 패키지 실행을 도와주는 도구
- -> npm 레지토리에 있는 패키지를 해당 폴더에서 실행해서 리액트를 설치
https://eunhee-programming.tistory.com/266
(React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준]
* 이미 node.js가 설치되어 있으신분들은 3번부터 참고해주세요 ^^ 1.node.js 다운 (기존과 같음) 2. 설치가 잘되었는지 확인하기 3. react 실행하기 - 방법 1: 원하는 폴더 이름으로 react 개발환경 세팅하
eunhee-programming.tistory.com
📍 기본 사항
☑️ 이름이 수정되면 안되는 파일들 :
public /index.html
src/index.js
☑️ ES7+ React/Redux/React-Native snippets 설치
rcc : 기본 클래스 틀 완성
rafce: 함수형 컴포넌트 기본틀 생성
☑️문법 )
1. 반드시 부모요소 하나로 감싸줘야함
<>
<Container>
<HomeContainer>
<Iframe
src={https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}}
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen"
</HomeContainer>
</Container>
<button onClick={() => setIsClicked(false)}>X</button>
</>
2. export default : 전체 파일을 가져 오겠다.
export 만 하면 ..
- import {Square, Square2, Square3}
- import Square ..만 해주는 거는 default있을 때