React 기초

Jivyy·2020년 5월 17일

WECODE

목록 보기

18/20

html,css,js,dom 을 거쳐 리액트를 공부하게 되었다.

자바스크립트 라이브러리

DOM 의 연장선으로서 DOM 의 method 들을 함수화 /
간편하지는 않음. 획기적이긴 했으나 한계가 있었음
웹페이지의 방대한 자료를 쉽게 관리하고 유지보수하기위해 필요해짐
-> 이를 해결하기 위해 프론트엔드의 프레임워크 / 라이브러리가 등장하게 되었다.

3대 장 : 리액트 / 앵귤러 / 뷰

앵귤러, 뷰 - 프레임워크 : 틀.
개발자가 틀 안에서 개발을 하게 된다.
그 중에서 필요한 부분들을 라이브러리라고 한다.(종속관계)
프레임워크 내에 a ,b, c 가 있는데
D가 필요할 경우 D 를 설치하게 되는데 여기서 D 가 라이브러리가 된다.
mvc(model view controller) : model = 데이터, 뷰 관리
프레임워크는 라이브러리를 포함하는 좀 더 넒은 의미로 볼 수 있다.
리액트 : 라이브러리 - mvc 와 달리 오로지 view 만 관리한다.

설치하면 코드를 저장하는 순간 화면이 refresh 되고 로컬호스트에 저장 jsx 파일을 js에서 읽을 수있게 컴파일 해주는 것

node : 자바스크립트는 브라우저에서만 동작하는 언어이다. 하지만 더이상 자바스크립트는 웹에서만 작동하지 않고
서버단에서도 동작하게 되었다. (탈웹) node 덕분에!
node 는 자바스크립트가 웹 밖에서도 작동하게끔 해주는 환경
jsx를 js 언어로 컴파일 해주는 것 : 뒷단에서 이루어지는 작업
cra 의 default setting 이 노드를 기반으로 하기 때문에 node 와 npm 의 설치가 필수적
npm(node package manage) : 세팅 하나하나의 패키지
npx(npm 에서 조금 더 업그레이드 된 버전)
node modules : default setting 내용
cra package / source code
package.json : dependencies /package의 이름과 버전정보 - 진짜 소스는 node module 에 있음
협업을 할 때, module 의 용량이 너무 크기 때문에 git 에 올리기 좋지 않음
내가 추가로 라이브러리를 받는다면 다른 협업하는 사람들이 알게 해야하기 때문에
ex) 내가 node-sass 를 다운로드 한 상태라는 것을 notice
.gitignore : push 를 해도 깃에서 무시하는 부분 / node modules 는 용량이 크므로 git 에 올리지 않는다.
index.html 상에서 body 내부에 id ="root"
reactDOM.render( a ,b ) = 함수에 인자가 2개 인 상태
a = 내가 화면에 보여주고자 하는 component
b = 삽입할 컴포넌트의 위치

sass - css 를 편리하게 쓰게해주는 라이브러리 : 확장자를 scss 로 바꿔서 사용한다.
설치방법 : npm install -g sass 혹은 npm install node-sass

JSX 특징 : 바깥에 감싸는 태그가 하나 있어야한다 : 첫 요소로 sibling 허용X
javascript와 달리 class 가 아니라 className로 사용한다.
모든 html 태그를 감싸는 최상위 태그가 필요하다 = 빈 태그도 가능(리액트 프레그먼트)
하지만 굳이 비워두기보다 <div ClassName="App"> 처럼 컴포넌트 이름으로 클래스명을 주면 좋다.
중괄호를 사용해서 js 속성을 사용할 수 있고
중괄호 2개를 이용해서 css도 인라인으로 사용할 수 있다.
style={{backgroundColor:"grey"}}