ReactJS with movie App (20.12.06 ~ 28)

오늘 안에 다 끝내고 내일부터 다른 코스 챌린지 들어가야 하는데 가능하겠지?

-> 응 못함,

​

Nomad 강의 중에서 reactJS와 react native 코스의 차이가 정말 궁금했는데, reactJS에서는 ES6버전의 Javascript를 사용하는 경우가 많아서 이름이 저렇게 붙은거 같아. 이 정도도 안하고 react native 코스를 진행하려고 하니까 문제가 생기는건 어쩌면 당연한거 아닐까?

​

기본적으로

nodeJS

npm

npx

git 세팅이 필요해서 다 했구

그 다음, react-app을 만들기 위해서는

npx create-react-app movie_app 을 쳐주면 된다. (like Django)

​

그 다음에 VSCode를 열어서 npm start를 terminal에 쳐주면 app이 실행되는데

왜 안되는거지?

​

-> wsl을 사용중인데, window part에 저장을 하면 react가 제대로 실행되지 않는다. linux home 디렉토리에 저장하니까 되네... 왜이러는거야!

​

2.0 > JSX란? (JavaScript eXtentions)

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

말 그대로 JS의 확장형인데, HTML과 JS를 따로 분리할 필요가 없는 형태라고 보면 될 것 같다.

되게 간편해 보이기도 하고,,, 익숙해지면 정말 편할듯!

​

2.1 > jsx + props

html tag에 properties를 넣듯이 react에서 props를 만들어 넣어주면서 data를 전달할 수 있다.

​

2.2 > Dynamic Component Generation

array.map(function) 을 이용하게 되면, 훨씬 편리한 방법으로 component를 생성할 수 있다.

array = ["a", "b", "c"];

<div> { array.map(dish => (<Food key={dish.id} />))} 뭐 이런식!

​

2.4 > Protection with PropTypes

react에서는 html component를 생성할 때 필수적으로 만족해야하는 Prop이 있다. 그런 요인들이 에러로 표현되니, 나올 때 마다 잘 보고 지켜주면 된다!

또, prop을 전달할 때, 잘 못 전달할 수도 있잖아? (ex, image에 string을 보낸다던가)

이런 상황을 방지하기 위한 패키지가 있어.

npm i prop-types 를 하면 다운로드가 되는데 (에러가 나면 npm i 를 해주면 됨, i는 install 인듯!),

someObject.propTypes = {

name : PropTypes.string.isRequired

}

뭐 이런 식으로, 해당 prop의 type과 required 여부를 설정해 줄 수 있다. 프로그램의 동작 상에는 문제가 없으나 react에서 에러를 발생시켜준다. (꼼꼼하게 작업할 수 있게 도와줌)

아 물론 이걸 사용하려면 import PropTypes from "prop-types"; 해줘야 한다!

​

//// 20.12.09

3.0 > function Componenets vs Class Components and State

function components는 function의 형태로, render하고자 하는 값을 return하면 된다.

​

class components는 좀 다르다. 상속이 가능한 형태를 만들고 싶어서 만든 듯 한데, 늘상 React.Component에 상속시켜야한다. 그렇게 되면 react 내부의 다양한 component들을 사용할 수 있게 된다.

단, class componenets에서 return을 하기 위해서는 render() 메서드를 사용해야한다.

ex)

class App extends React.Component{

render() {

return <h1>I'm a class component</h1>;

}

}

​

class의 가장 큰 장점은 state를 사용할 수 있다는건데, state란 클래스 내에서 저장, 변형 할 수 있는 Object, 데이터를 말한다. render하는 방법은 {this.state.something}

​

별첨 ) component-property로 function을 설정할 때, F()로 설정하면 함수가 즉시 실행되고, F로만 설정하면 해당 조건이 만족되었을 때 실행된다. 잊지말것!

​

3.1 > about state

state는 object이긴 하지만 일반적인 JS의 object처럼 사용하면 에러가 난다.

Do not mutate state directly. Use setState()

말 그대로 직접 연산하지 말라는 뜻이다. 왜냐면, 직접 연산하면 작동하긴 한다. 다만 render가 refresh되지 않는다. 그럼 연산의 의미가 없잖아? 매번 refresh 해주면 가능하긴 하겠지만 너무나 귀찮고 어렵지.

그래서 이걸 자동으로 해결해주는 메서드들이 있다! (refresh === call render function!)

심지어 변하는 부분만 refresh하기 때문에 굉장히 빠르다! (virtual DOM 덕분!)

React Is Super Smart!!

그 함수의 기본형은 다음과 같은데

this.setState( { } );

state를 호출하기는 다소 번거롭다.

this.setState({ count: this.state.count - 1 });

하지만 react는 똑똑하다.

this.setState((current) => ({ count: current.count + 1 }));

​

3.2 > component life cycle

component의 생에에 맞춰서 발생하는 constructor가 있다.

mounting - updating - unmounting - errorHandling 등의 상황에 맞춰서 순차적으로 발생하는 methods들을 만들 수 있다. 자세한건 react 다큐먼트를 보라.

​

3.3 > planning

심지어 state를 미리 선언하지 않아도 사용할 수 있음,, react 대박 똑똑

근데 다르게 생각하면, 오타내면 걍 망하는거잖아 쿠ㅠㅠㅠ

​

4.1>

componentDidMount()

async - await

​

4.2>

JSON Data set 에서 Data를 가져올 때,

movies.data.data.movies 뭐 이런식으로 dictionary구조를 맞춰서 가져올 수 있지만,

ECMA script ES6를 활용하면

{data : {data:{movies}}} 이런식으로 data set의 구조를 그대로 활용하면서 해당 데이터를 movies라는 변수명으로 선언할 수 있다.

​

react에서 css styling을 하는 기초적인 방법이다

그냥 css 파일 만들고 import하면 된다.

​

4.3>

전 챕터에서도 그렇고, map 함수는 key prop을 필요로 한다. 왜그러는지 모르겠네 (니꼬쌤한테 물어봤으니까 기다려보자)

​

4.4> styling

​

5.0 > Do! github static web publishing for free

​

*주의할점 : git-repository name을 소문자로 구성한다.

gh-page를 설치한다. npm i gh-pages

​

(on package.json)

"homepage" : URL 을 작성한다.

​

"script"파트에

"deploy" : "gh-pages -d build",

"predeploy" : "npm run build"

이렇게 두개의 명령어를 만든다.

​

(위에는 start와 build 가 작성되어 있다.)

deploy는 build폴더를 gh-pages branch로 upload한다.

pre 라는 표현이 붙어있는 명령어는 그 pre뒤에 붙은 명령어가 실행되기 전에 실행되기 때문에,

deploy가 실행되기 전, predeploy가 build를 한다.

=> deploy를 실행하면, 빌드 후 브런치로 업로드 하는 것.

​

*script 실행방법 : npm run script

​

6.0 > Router

Router : 경로에 따라서 데이터셋을 이동시키는 장치

Router를 생성하고, 그 안에 각각의 Route 들을 설정해주면 된다.

Route의 속성에는 path와 component가 있는데, path는 해당 주소, compoenent는 그 주소에 표시할 데이터 셋이라고 보면 된다.

​

Hashrouter와 Browserrouter가 있는데, 차이를 아직 잘 모르겠다. Browserrouter를 쓰면 된다는걸 알 뿐.

​

6.1, 6.2 > Navigation

react router는 url에 해당되는 모든 route들을 렌더링 한다.

예를들면 url/home/introduction이라면

url/

url/home

url/home/introduction

이 세가지 주소를 가지고 있는 컴포넌트들을 전부 렌더링 하게 된다. -> 같이 나와버림

이런 상황에서는 해당 라우트에 exact={true}를 넣어주면 된다. 정확하게 url이 맞아떨어지는 경우에만 렌더링 하게 만들어주는 속성이다.

​

html의 href 속성으로 url을 넘겨주면 자꾸만 새로고침을 하게된다. React의 virtual DOM을 사용하기 위해서는 react-router-dom중 Link라는 태그를 사용하도록 하자. 그러면 react다운 인터랙션을 보여준다. 단, Link 태그는 Router 태그 안에 존재해야한다!

​

6.3 > Sharing props between routes

​

- 백업 : [출처] ReactJS with movie App (20.12.06 ~ 28)|작성자 winney