React 👩🏻‍💻

React

• Javascript Web Front-end Rendering 라이브러리 중 하나로 보통 Single Page Application Framework가 대부분의 기능을 포함하고 있는 반면에 React는 대부분의 기능을 포함하고 있는 Framework가 아니라 View를 렌더링 하는 것이 주 기능이며 나머지 기타 기능들은 서드파티 라이브러리를 추가적으로 사용해야한다.

Component

• 리액트에서 데이터를 화면에 렌더링하는 가장 기본이 되는 단위로 React.Component를 상속하는 클래스 형태의 컴포넌트와 함수 형태의 컴포넌트 두가지 형태를 가지고 있으며 목적에 따라 구분해서 사용한다.

• 리액트는 작은 단위부터 큰 단위의 컴포넌트의 조합으로 구성되며 컴포넌트를 분리하여 개발하고 각각을 적절히 조합하여 하나의 페이지를 구성하는 형태로 개발한다.

State

• 리액트 컴포넌트에서 변경 가능한 데이터를 state라고 부른다.

Props

• 자식 컴포넌트가 부모 컴포넌트로부터 parameter로 받아오는 값을 말하며 변경할 수 없다.

불변성

• 리액트에서 렌더링을 할 때 판단하는 방법은 state가 변경되었을 때인데 변경 전/후 state를 서로 비교할 때 복잡도가 높은 객체의 경우 자식 프로퍼티까지 비교하는 것보다 효율적인 방법으로 state의 레퍼런스가 변경 되었을 떄 변경된 것으로 간주하고 렌더링한다.

• 기존 state 값을 직접 변경하는 것이 아니라 기존 state 값을 바탕으로 변경되어 새로 생성된 객체의 레퍼런스를 setState 메소드를 통하여 변경하는데 이것을 불변성을 우지한다고 표현한다.

설치 및 초기셋팅

//사이트에서 nodejs 설치
node -v //확인

//npx 설치
npm install npx -g

//리액트 앱 생성
npx create-react-app movie_app

• readme.md 안에 내용은 지워도 된다.

• yarn.lock, logo.svg, serviceworker, index.css, app.test.js, app.css는 삭제해도된다.

//index.js에서 다음은 삭제 가능하다.

import './index.css';
import * as serviceWorker from './serviceWorker';

//React.DOM 아래의 모든 줄 삭제 가능

//app.js에서 삭제
import logo from './logo.svg';
import './App.css';

//다음처럼 empty div만 남겨놓고 삭제
import React from 'react';

function App() {
  return <div className="App" />;
}

export default App;

JSX & PROPS

컴포넌트란?

• html을 반환하는 함수로 반복해서 재사용이 가능하다.

• 리액트는 컴포넌트를 사용하여 html처럼 작성하려는 경우에 사용한다. 이러한 javascript와 html사이의 조합을 jsx라고 한다.

• src 폴더 안에 js파일을 만들어 컴포넌트를 생상하고 사용할 수 있으며 항상 폴더 안에서 react를 import하여 사용한다. 그렇지 않으면 리액트는 jsx가 있는 컴포넌트를 사용하는 것을 이해하지 못한다.

• 리액트 어플리케이션은 하나의 컴포넌트만을 렌더링 해야한다.(초기셋팅시 app.js를 레더링하고 있으므로 원래 만들어져있는 app.js 파일 안에 새로운 컴포넌트를 import하여 사용한다.)

• 리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 평험한 일반 html로 만든다.

• 컴포넌트에 정보를 보낼 수 있다.

컴포넌트에서 다른 컴포넌트로 정보를 보내는 방법

import React from "react";

function Food(props){
	console.log(props.name) // kimchi
	return <h1>I like Potato</h1>;
}

function App() {
	return (
    	<div>
         	<h1>Hello</h1>
            <Food name = "kimchi" />
        </div>
    )
}

• food component에 kimchi라는 value로 prop(property) name을 준다.

• string, boolean, array, number, true로 다양하게 가능하다.

• 누군가가 food component로 정보를 보내려고 하면 react는 이 모든 속성을 가져와 food function component의 인자로 넣는다.

function Food({name, picture}){
	console.log(props.name) // kimchi
	return <h1>I like {name}</h1>;
}

• props의 모든 object를 열어서 속성을 꺼낼 수 있다.

• jsx + props의 힘으로 컴포넌트에 정보를 받아 재사용할 수 있다.

• jsx = HTML + JavaScript

컴포넌트는 대문자로 시작해야하며, props를 사용하여 정보를 보낼 수 있다.

Dynamic Component Generation

function Food({name, picture}){
	return <div>
    	<h2>I like {name}</h2>
        <:img src={picture} />
    </div>;
}

const foodILike = [
	{
    	name : "kimchi",
        image : "http://aeriskitchen.com..."
    },
    {
    	name : "samgyepsal",
        image : "http://aeriskitchen.com..."
    },
    {
    	name : "bibimbap",
        image : "http://aeriskitchen.com..."
    },
    {
    	name : "donkasu",
        image : "http://aeriskitchen.com..."
    },
    {
    	name : "kimbap",
        image : "http://aeriskitchen.com..."
    }

];

function App() {
	return (
    	<div> 
            {foodILike.map(dish => <Food name = {dish.name} picture={dish.image} />)}
    )
}

const friends = ["dal", "mark", "lynn"];
friends.map(current => {
	console.log(current);
    return 0 
})

• map : array의 각 아이템에서 함수를 실행하는 array를 가지는데, 자바스크립트 함수이며 함수의 결과를 갖는 array를 준다. (array로부터 array를 준다.)

• map은 function을 취해서 그 function을 array의 각 item에 적용한다.

map Recap

function renderFood(dish) {
	console.log(dish);
    return <Food name={dish.name} picture={dish.image} / >
}

function App() {
	return (
    	<div>{foodILike.map(renderFood)}</div>
    )
}

• 모든 리액트의 요소들은 유일해야하며 이들을 리스트 안으로 집어넣을 때 유일성을 잃는다.(요소에 id를 준다.)

const foodILike = [
	{
    	id : 1,
    	name : "kimchi",
        image : "http://aeriskitchen.com..."
    },
    {
    	id : 2,
    	name : "samgyepsal",
        image : "http://aeriskitchen.com..."
    }
];

function Food({name, picture}){
	return <div>
    	<h2>I like {name}</h2>
        <img src={picture} alt={name}/>
    </div>;
}

function App() {
	return (
    	<div> 
            {foodILike.map(dish =>( 
            <Food key={dish.id} name = {dish.name} picture={dish.image} />))}
    )
}

Protection with PropTypes

• key prop은 함수로 전달되지 않으며 기본적으로 react내부에서 사용하기 위한 것이다.

• 우리가 원하는 props가 우리가 갖고 있는 props 인지 체크하는 방법이 필요하다.

// 전달받은 props가 내가 원하는 props인지 확인한다.
npm i prop-types

import PropTypes from "prop-types";

function Food({name, picture, rating}){
	return <div>
    	<h2>I like {name}</h2>
        <h4>{rating}/5.0</h4>
        <img src={picture} alt={name}/>
    </div>;
}
Food.propTypes = {
	name: PropTypes.string.isRequired,  
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number
}

const foodILike = [
	{
    	id : 1,
    	name : "kimchi",
        image : "http://aeriskitchen.com...",
        rating : 5
    },
    {
    	id : 2,
    	name : "samgyepsal",
        image : "http://aeriskitchen.com...",
        rating : 4.9
    }
];

function App() {
	return (
    	<div> 
            {foodILike.map(dish =>( 
            <Food 
            	key={dish.id} 
                name = {dish.name} 
                picture={dish.image}
                rating = {dish.rating}
            />))}
    )
}

State

class components and state

• 보통 동적 데이터와 함께 작업할 때 만들어져 변하는 데이터, 존재하지 않는 데이터, 그리고 생겨나고 사리지거나 또는 변경된 데이터 등의 종류를 dynamic data라고 하며, 이럴 경우 state가 필요하다.

//APP 은 React component
class App extend React.Compponent{
	state = {
    	count: 0
    };
     add = () => {
    	console.log("add");
        //this.state.count = 1;  이렇게 직접 state를 변경하지 않는다.
        this.setState({count: this.state.count+1});// 추천하지 않는 방법
        //state를 set할 때 react에서 외부의 상태에 의존하지 않도록 한다.
        this.setState(current => ({count : current.count +1}));
    };
    
    minums =() => {
    	console.log("minus");
        this.setState({count: this.state.count-1})
    };
	render(){
      return(
    	<div>
    	<h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
        </div>
       );
    }
}

• React component는 많은 것을 가지고 있으며 그중 하나가 state이다. 매번 컴포넌트를 만들 때마다 모든 것을 구현하지 않기 위해 extend 한다.

• react class component에서 extend하여 App component를 사용한다.(App component는 React component)

• class react component는 함수가 아니기 때문에 return 을 갖고 있지 않다. render method를 가지고 있으며 react component에서 확장했기 때문에 app component 안에 있다.

• Function component는 함수이며 무언가를 return 하고 screen에 표시된다. class component는 class 이지만 react component로부터 확장되며 screen에 표시된다. 그리고 react는 자동적으로 모든 class component의 render method를 실행한다.

• state는 object이며 component의 데이터를 넣을 공간이 있고 이 데이터는 변한다.

• class이기 때문에 this.state.count로 사용

• 매번 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔주길 원한다면 setState function을 사용한다.

• state는 object이기 때문에 setState는 새로운 state를 받아야한다.

• setState를 호출하면 state를 refresh하며 새로운 state와 함께 render function을 호출한다.

Component Life Cycle

• life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이다.

Mounting

• constructor() : 자바스크립트에서 class를 만들 때 호출된다.

class App extend React.Compponent{
	constructor(props){
    	super(props);
    	console.log("hello");
    }
	state = {
    	count: 0
    };
     add = () => {
    	console.log("add");
        //this.state.count = 1;  이렇게 직접 state를 변경하지 않는다.
        this.setState({count: this.state.count+1});// 추천하지 않는 방법
        //state를 set할 때 react에서 외부의 상태에 의존하지 않도록 한다.
        this.setState(current => ({count : current.count +1}));
    };
    
    minums =() => {
    	console.log("minus");
        this.setState({count: this.state.count-1})
    };
    componentDidMount() {
    	console.log("component rendered");
    }
    componentDidUpdate() {
    	console.lof("i just updated"); 
    }
	render(){
      console.log("render")
      return(
    	<div>
    	<h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
        </div>
       );
    }
}

-> hello
	render

• static getDerivedStateFromProps()

• render()

• componentDidMount() : component가 처음 render 된것을 알려준다.

Updating

• setState를 호출할 때 마다 발생한다.

• static getDerivedStateFromProps()

• shouldComponentUdate() : 컴포넌트를 업데이트 할지 말지 결정

• render()

• getSnapshopBeforeUpdate()

• componentDidUpdate()

Unmounting

• 페이지를 바꾸거나 state를 사용해서 component를 교체하는 경우

• componentWillUnmount()

import React from "react";

class App extends React.Component {
	state = {
    	isLoading : true,
        movies : []
    }
    componentDidMount() {
    	setTimeout(() => {
        	this.setState({isLoading : false });
        }, 6000);
    }
	render() {
    	const {isLoading} = this.state;//return의 isLoading에서 this.state.isLoading으로 사용해야 하지만 항상 this.state를 사용하지 않기 위해 사용
    	return <div>{isLoading ? "Loading" : "We are ready"}</div>;
    }
}

export default App;

• render를 하면 가장 처음에 호출되는 life cycle method는 componentDidMount() 이다.(component가 mount 되자마자 호출된다.)

Fetch data

• 자바스크립트에서 데이터를 fetch하는 방법은 fetch()를 이용할수도 있지만 axios로도 가능하며 fetch위에 있는 작은 레이어와 같다.

npm i axios

import axios from "axios";
import React from "react";

class App extends React.Component {
	state = {
    	isLoading : true,
        movies : []
    }
    componentDidMount() {
    	const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");
    }
	render() {
    	const {isLoading} = this.state;//return의 isLoading에서 this.state.isLoading으로 사용해야 하지만 항상 this.state를 사용하지 않기 위해 사용
    	return <div>{isLoading ? "Loading" : "We are ready"}</div>;
    }
}

export default App;

• axios.get()은 느릴 수 있으며 자바스크립트에게 componentDidMount 함수가 끝날 때까지 약간 시간이걸릴 수 있다고 알려주고 기다려야한다.

    async componentDidMount() {
    	const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");
    }
    
    or
    
    getMovies = async() => {
       	const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    }
    componentDidMount() {
		this.getMovies();
    }

• 함수가 비동기이며 그것을 기다려야 한다는 것을 알려주기 위해 async, 기다려야할 것을 가리키며 await을 사용한다.

rendering

    getMovies = async() => {
       	const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
        console.log(movies);
        //위의 console.log로 확인 후 접근
        console.log(movies.data.data.movies)
    }
    componentDidMount() {
		this.getMovies();
    }
    
    or
    
        getMovies = async() => {
       	const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json");
        console.log(movies);
    }
    componentDidMount() {
		this.getMovies();
    }

• 데이터 확인 후 state에 집어넣는다.

state = {
    	isLoading : true,
        movies : []
    }
getMovies = async() => {
       	const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");\
        //state의 movies는 axiosd의 movies
        //this.setState({movies : movies})
        //위와 같은 의미로 최신버전에서 사용할 수 있다.
        this.setState({movies, isLoading : false});
        
    }
    componentDidMount() {
		this.getMovies();
    }

• movie를 rendering하기 위해서 movies.js 파일을 생성한다

import React from "react";
import PropTypes from "prop-types";

function Movie{id, title, poster}) {
	return<h1>{movie}</h1>
}

Movie.propTypes = {
	id : PropTypes.number.isRequired,
    title : PropTypes.string.isRequired,
    poster : PropTypes.string.isRequired,
	
}

export default Movie;

• 컴포넌트에 state가 필요하지 않을 경우 class가 아닌 함수형을 사용한다.

• 이 파일을 render하기 위해서 app.js에 추가한다.

import Movie from "./Movie";

class App extends React.Component {
	state = {
    	isLoading : true,
        movies : []
    }
    getMovies = async() => {
       	const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
        this.setState({movies, isLoading : false});
        
    }
    componentDidMount() {
		this.getMovies();
    }
	render() {
    	const {isLoading, movies} = this.state;//return의 isLoading에서 this.state.isLoading으로 사용해야 하지만 항상 this.state를 사용하지 않기 위해 사용
    	return <div>{isLoading ? "Loading" : movies.map(movie) => {
        return <Movie key = {movie.id}id={movie.id} title={movie.title} poster={movie.medium_cover_image} />
        }}</div>;
    }
}

export default App;

Deploying to Github Pages

npm i gh-pages

• gh-pages는 웹사이트를 github의 githyb page 도메인에 나타나게 해준다.

//package.json 마지막에 추가해준다.
"homepage" : "https://{github username}.github.io/{name of project in guthub}"

//scripts에 deploy를 추가해준다.
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
	"deploy" : "gh-pages -d build"
    "predeploy" : "npm run build"
    
 npm run build
 
 npm run deploy

Routing

react-router-dom

npm install react-router-dom

• url을 가져다가 확인하고 우리가 라우터에 명령하는 것에 따라 컴포넌트를 불러온다.

• 리액트 라우터는 기본적으로 url을 가져와서 라우터에 있는 모든 것과 비교한다. 그리고 매치가 된다면 컴포넌트를 보여준다.(두개의 컴포넌트를 가질 수 있다.)

Navigation

//components/Navigation.js

import react from "React";

fuction Navigation() {
    return (
        <div>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </div>
    );
}

export default Navigation;

• 새로고침하여 페이지가 변경된다.

//app.js
import {HashRouter, Route} from "react-router-dom";
import Navigation from "./components/Navigation"

function App(){
  return (
    <HashRouter>
      <Navigation />
      <Route path="/home" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

• BrowserRouter 혹은 HashRouter로 사용할 수 있는데, github-pages에서는 HashRouter가 설정하기 더 편하다.

<BrowserRouter />: HTML5 히스토리 API를 사용하여 주소를 관리하는 라우터(해쉬뱅 모드 사용 안함)
<Route />: 요청 경로와 렌더링할 컴포넌트를 설정한다
<Switch />: 하위에 라우터 중 하나를 선택한다
<Redirect />: 요청 경로를 다른 경로로 리다이렉션한다

다음과 같이 사용하여 규칙을 벗어났을 경우(정해진 컴포넌트 경로로 요청이 들어오지 않을 경우) 루트 요청으로 리다이렉션하게 만들어줄 수 있다.

<Redirect path="*" to="/" />
    </Switch>

Event

onClick

<h1><a href="/" onClick={function(e){
		e.preventDefault();//함수를 호출했을 때 페이지가 reload되는 것을 막아준다.
	}}>

---

[TIL] React
HTML DOM Events
React에서 Mobx 경험기 (Redux와 비교기)
누구든지 하는 리액트 4편: props 와 state
리액트 라우터 사용하기 (타입스크립트 버전)
리액트 Styled Componets - 2편
Strict 모드
템플릿 리터럴(Template Literal)과 스타일드 컴포넌트(styled-component)
리액트 공부! 스타일드 컴포넌트
tyled-Components를 이용한 React 컴포넌트 스타일링
[react package] styled-components에서 global style 적용하기, css reset
[React] Styled Components 사용법
default export와 named export 차이점
React Router로 사용자 인증하기 (로그인/로그아웃)
React 적용 가이드 - React 작동 방법
Axios 러닝가이드
5 Ways to animate a React app.
[리액트를 다루는 기술] 4장 - 이벤트 핸들링
styled-component + react-transition-group = very simple Transition