Create-react-app

자 이제 react를 배운다. nomad coder 의 react 로 영화앱만들기 코스로 배워보기로 한다.

 

먼저 react가 무엇인가.

 

react는 현업에서 인기 있는 웹.앱 의 view를 개발 할 수 있도록 하는 라이브러리이다

즉 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다

특징으로는

1. 선언형 프로그래밍

: 먼저 프로그래밍은 선언형과 명령형으로 나뉜다.

선언형 - 함수형, 논리형, 제한형 프로그래밍 언어로 쓰인경우이다. 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는다.

명령형 - 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍. 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는다.

 

리액트는 선언형 성격에 맞게 원하는 결과를 얻기 위해 jsx문법을 통해 구현한다.

선언형의 특성은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발 할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어

높은 생산성을 보장한다.

 

2. 컴포넌트 기반으로 재사용성이 뛰어나다

: 컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 것.

웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에 쓸 수 있도록

높은 재사용성을 가진다.

 

3. virtual Dom기반

: 버츄얼 돔이란 실제 돔 표현의 모든 종류- 실제 돔을 다양한 방식으로 표현한 것,

버추얼 돔 트리에서 어떤 것을 변경하면 새로운 버추얼 트리가 나온다. 변경된 새로운 트리와 이전 트리를 비교 차이를 찾고

실제 dom에 대해 필요한 최소한 변경만 수행

 

4. 컴포넌트는 state와 props를 가진다.

: react는 내부적으로 State와 Props를 가진다. 이는 UI가 사용자의 동작에 따라 다른 UI나 액션이 필요하기 때문

: state - 동적인 데이터를 다룰 때 사용한다. 사용자와 상호작용을 통해 데이터를 동적으로 변경해야 할 때 ..

state는 클래스형 컴포넌트에서만 사용할 수 잇는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다

그러나 자신보다 상위에 있는 state는 변경이 가능 state를 변경해주는 함수를 Props로 받는 다면 state의 변경이 가능

주의 할 점은 props로 넘겨 줄 때 this의bindin을 신경써야 함

 

: props- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 전달 받은 props를 변경이 불가능하고 props를 전달해준

최상위 부모 컴포넌트만 props를 변경 할 수 있다.

 

5. data-flow

react는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다

angular.js와 같은 양방향 데이터 바인딩은 규모가 커질 수록 데이터의 흐름을 추적하기가 힘들고 복잡해진다.

복잡한 앱에서도 데이터의 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다.

 

 

필요한 node.js와 npm은 설치되어 있고 react를 사용하면 ES의 최신 버전까지 사용해야 하는 경우가 빈번한데

이를 해결해줄 번들러 webpack이나 babel등을 설치해야 한다.

but create-react-app을 통해 하나의 명령어로 필요한것을 set up할 수있다.

 

우선 create-react-app으로 초기 설치 할 것을 모두 설치해주는데 먼저 npm install npx로 npx를 설치한뒤

npx create-react-app "원하는이름"

설치가 완료되었고 git init을 해주고 깃헙에 레포지토리 만들어준뒤 커밋하고 등록했다

 

 

자 이제 vscode를 통해 오픈!

이것 저것 폴더가 많다.

우선 src폴더의  index.js로 가서

요렇게 정리해줬다. 

 

그리고 src의 파일들도 요렇게 정리하고 시작한다.

자 그렇게 하고 App() 함수에 저렇게 작성해주면~!

요렇게 root div에 딱 뜬다~

public의 index.html에는 없지만~~

react는 사용자가 쓰는 모든 요소를 생성한다는 것이다.

자바스크립트와 함께 그것들을 만들고 HTML에 생성해준다.

 

index.js를 보면 reactDom으로 랜더링 하는데 root id를 얻어와서 import 된 app.js 컴포넌트를 넣어준다? 라는 느낌적인 느낌

아~ 버추얼 돔... HTML을 작성하지 않고 버추얼 돔을 이용해서 만들어진것을 브라우저에 집어 넣어버리는?

그런건가 싶다 공부하다보면 더 명확해지겠지..