리액트#1 안녕 리액트

what is JSX

JS에서 사용하는 것이지만, HTML처럼 생겼다. JS파일안에 있지만 JS는 아니다. 만드는 내용들은 전부 다 브라우저에서 보이는 내용이다.

 

render()

return을 하는 것으로 무엇을 return할까? JSX(화면에 보여지는 것)를 리턴한다.

 

LifeCycle

render의 생명주기다. 무엇이 먼저 불리고 뭐가 먼저 불리는지 순서라는 것이 있다. 조금 복잡한 순서로 불리면서 화면의 변화가 생기는 것이다. constructor / render / componentdidmount

- render : 마운트나 나오기 전의 시점으로 JSX를 부르는 상황 말 그대로 결국에 마지막으로 매무새를 단장하고 화면에 보여주기 위한 준비를 하는 것이고 return을 하는게 화면에 보여지는 것들

- componentdidmount : 랜더를 한 뒤에 화면에 무언가들이 보여지는 상태일 때, 그 상태에서 무언가를 하고 싶을 때 사용하는 것.(필요에 의해 화면에 나오는 것이 마운트) 백엔드 API를 호출한다. (모든 html이 브라우저에

 

순서 : 생성자(class 자체에서 제공) -> render(JSX 화면에서 볼 것들) -> componentdidmount(그대로 메소드가 불리는 것) 

componentdidmount와 같은 역할을 하는게 constructor이며 굳이 거기서 처리 할 로직이 있으면 안써도 되지만 매번 쓴다. <- 그만큼 자주 쓴다는 것이겠지?!

 

 

 

함수형 컴포넌트와 class 컴포넌트의 차이점

예전에는 class를 사용했는데 요즘에는 function을 사용한다. function이 훨씬 더 간결하고 로직처리하고 반환하고 반환할게 업승면 끝나고, 함수형 컴포넌트가 사용하려면 베이스가 있어야한다. class를 완벽하게 다룰 수 있다는 전재하에 가장 큰 차이는 쉽다. 간결하다. class는 라이프 사이클 function에서는 Hooks 아예 쓰는 방식이 다르다. 함수형이 조금 더 간결하지만 하는 일은 같은 일을 할 수 있어야하고 할 수 있게 지원이 되어있다.

 

---

 

리액트가 뭐야? 

프레임 워크가 더 크고 내가 개발할 때 필요한 모든 것들의 내장 (앵귤러, 뷰는 틀이 정해져있기에 다 똑같이 해야하고 자유가 없다.) 그만큼 크고 필요한 걸 다 챙겨주지만 무겁다. 라이브러리는 내장 기능들이 따로 없다. (라우터는 페이지를 이동할 수 있게 해주는 것이 프레임 워크에 자체적으로 내장 되어있다.) 그렇기에 라이브러리가 가볍다. 자유가 있고 내가 원하는 기능을 나에게 맞게 가능하다. 

앵귤러가 제일 처음 나왔고, 구글에서 개발 관리를한다. 뷰는 앵귤러랑 리액트의 장점만 가지고 만든 것으로 최근 핫한 프레임워크이다.

 

굳이 왜 리액트를 사용하는가? 

SPA

: 기존의 방법이라면 페이지 마다 html을 만드는 것이지만, 파일 내부에 .html이 하나 밖에 없고, 기술이 발달하면서 점점 사이트가 복잡해졌고 동적인 contect의 사용이 잦다.(사용자와의 상호작용)을 위해 JS를 활용한 웹페이지를 만들기 시작했다. 그렇게 리액트가 탄생되었으며 SPA라고 하며, 싱글 페이지 애플리케이션의 약자로 = 하나의 페이지 어플리케이션, 어플리케이션은 모바일이 아니라 웹사이트 전부를 어플리케이션이라고 한다. 리액트로 만들면 리액트앱이라고 한다.

💡SPA의 핵심은 HTML이 하나다. 화면은 그대로 있는데 다른 애들이 계속 다른걸 return하는 것. JS를 이용해서 보이는 콘텐츠를 변경해준다.

 

Node와 NPM 

node

: JS는 브라우저에서 도니까 컴파일러가 없다. 백엔드에서 하려면 서버에서 돌아야하는데 그렇게 해주기 위해서 터미널에서 자바스크립트를 돌릴 수 있게 해주는 것.

npm

: node랑 같이 딸려오는 것 노드패키지매니저, 각각의 패키지를 관리하는 서비스로 리액트도 하나의 패키지다. npm외에 yarn이 존재한다.

https://www.npmjs.com/ -> react검색

npm | build amazing things

 

react 파일 생성 방법

터미널에서 npx create-react-app learn-react 

create-react-app 
리액트가 가벼운 대신 사람들이 직접 추가해야하는게 많아서 필수적으로 개발할 때 필요한 것들을 다 넣어준다.

learn-react 
파일명은 learn-react이다.

root가 전체가 된다. body부분은 아예 안건들여도 된다고 생각하면 된다. html이 하나인 이유가 SPA때문이다. index는 기준이되는 엔트리 포인트(프로그램이나 코드에 진입해서 실행을 시작하는 부분) 이자 메인이 되는 페이지라고 생각하면 쉽다.

크리에이트 리액트 앱에서 만들어둔 것으로 깃에서 무시하라는 의미이다. git에 업로드 할 때 불필요한 것들은 필요하다는 의미는 돌아가는데는 필요하면 git에는 불필요하다.'라는 의미라고 생각하라

package.json은 모든 버전들이 모든 중요한 정보를 담고있는 파일이다.

• dependencies
  : 내가 이 프로젝트에서 사용하는 패키지들을 모아둔것, 이름과 버전 넘버
• scripts
  : 스크립트(실행할 때의 실행문) eject로 돌려버리면 위험하다. 그냥 안돌리는게 좋다. 고장날 가능성이 높다. start랑 build(이 서비스를 진짜로 출시할 준비가 됐을 때 배포한다고 하는 것이다. 

 

터미널에서 npm run start(개발 모드 시작 - 내 로컬 호스트로 서버를 돌리는 것) 하는 것이 좋다 
npm start로만 하면 build이런건 안뜬다.

Compiled successfully!

You can now view learn-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.58.1.33:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

내 로컬에서 서버를 연 것이다. 로컬에서 나가는 법 control(not command) + C -> localhost:3000 페이지를 새로고침

 

index라고 붙은건 무조건 중요하다. 엔트리 포인트 (기준이 되는 최상위)

 

import React from 'react';
//모든 컴포넌트마다 최상단에 위치해 있어야 한다.

import ReactDOM from 'react-dom';
//얘는 index.js에만 있으면 된다. 

ReactDOM.render(
	<App />, <- 컴포넌트 중에 제일 부모가되는 애가 위치한다. 가장 부모를 넣으면 그 밑에 애들은 당연히 따라온다. 
	document.getElementById('root') <- html파일에 접근해서 뭔가 해준다. 제일 부모 컴포넌트를 넣어주는 일을 한다. (컴포넌트를 넣어주는 대상)
);

 

 

컴포넌트 이름은 맨 앞의 글자가 무조건 대문자이다. 

import React, {Component} from "react";
class App extends Component

--

import React from "react";
class App extends React.Component

import App from './App';
이름을 붙이면 되지만 보통은 컴포넌트 이름을 그대로 사용한다.

./App은 상대경로
.은 지금 내 위치
./App.js를 해줘야하는데 JS니까 알아서 인식해준다.

.js가 아니라 .jsx로 하는 사람도 있다. 둘다 똑같음

../App
현재 폴더 말고 다른 폴더에서 찾고 싶으면

 

render는 뭔가를 리턴해야해 render()가 method이기에 return할게 있는거다. 

return문안에 소괄호를 써야한다. 함수 호출개념이랑 다르다. 여러줄이 있는게 하나일 때? 부모가 하나 일때, 부모는 무조건 하나여야한다. 형제가 있으면 안된다. 형제가 최상위가 될 순 없다. 

 

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

//두개의 인자들을 컴마로?

 

ReactDOM.render -> 묶어주는 역할

render는 각 컴포넌트에서 보여주고 싶은 JS만 보여주는 것.

class가 하나의 컨테이너라고 생각하면 된다. 렌더가 반환하는데 JSX(결국 화면에 보여지는 것) JSX를 위해 render가 있다. 

 

props
state는 뭔가 component 에서 바뀌는 데이터를 state에 상태로 관리를 한다. state의 데이터 타입이 뭘까요? object이다. (변경되는 값들이 저장된다.) setState는 기존의 상태값을 변화 주기 위해서 사용하는 method이다.