[React] ReactJS로 웹 서비스 만들기

노마드코더 아카데미의 ReactJS로 웹 서비스 만들기 강의를 정리하는 글입니다.

# Setup

---

ReactJS를 사용하기 위해서 Node.js, npm, 그리고 npx를 설치해야 합니다.

#1.0 Creating your first React App

---

Node.js 설치

• 설치하기
• Node.js를 설치하면 자동으로 npm이 함께 설치됩니다.

설치 확인

$ node -v
$ npm -v

npx 설치

$ npm install npx -g

• Error가 날 경우 명령어 앞에 sudo 를 붙여 실행
• 비밀번호는 본인 PC의 패스워드를 입력

create-react-app

• 예전에는 react 코드를 브라우저가 이해하도록 컴파일하기 위해 Webpack, Babel 같은 것들을 설치해야 했습니다.
• 하지만 create-react-app 을 이용하면 불필요한 과정 없이 간단하게 컴파일할 수 있습니다.

$ npx create-react-app *folder name*

• 프로젝트 폴더를 만들 상위 폴더에서 위와 같이 실행
• folder name에는 프로젝트명을 기입

$ npm start

🎉 Ta-da! 여러분의 첫 React App이 구동되었습니다!

README.md 수정

• 기존 내용 삭제 후 프로젝트용 README.md를 작성합니다.

기본 파일 삭제 및 수정

• index.js 파일에서 아래 코드만 남기고 모두 삭제
• import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
• App.js 파일에서 아래 코드만 남기고 모두 삭제
• import React from 'react'; function App() { return ( <div className="App" /> ); } export default App;
• src 폴더 아래 파일 중 index.js, App.js를 제외한 나머지 파일 모두 삭제

#1.1 Creating a Github Repository

---

Github으로 내보내기

• Project folder initialize

$ git init

• Github에 프로젝트 folder name과 동일한 이름의 Repository(option)
• Console로 돌아와 다음 코드 실행

// 원격 저장소 연결
$ git remote add origin REPOSITORY URL

// 프로젝트 staging area에 올리기
$ git add .

// 초기 커밋
$ git commit -m "Initial commit"

// push
$ git push origin master

#1.2 How does React work?

---

React의 원리

• 실제 html에는 <div class="root"></div> 하나만 존재하고 실제 그 안에 렌더링 되는 마크업은 모두 React가 만들어냅니다. ⇒ Vertual(가상의) Code라고 표현하는 이유
• 코드를 수정하고 저장하면 브라우저에서 자동으로 Refresh됩니다. (단, $npm start 후 console창을 닫지 않고 켜 두어야 함)

#2 JSX & Props

#2.0 Creating your first React Component

---

jsx & Component

• Component : React로 만들어진 앱을 이루는 가장 작은 단위. 데이터를 입력 받아 DOM Node를 출력하는 함수라고도 표현할 수 있습니다.
• React Application은 하나의 Component(⇒ App)만을 렌더링해야 합니다.
• 리액트 앱을 잘 만들기 위해선 다음 두 가지 조건이 필요합니다.
  • 작고 단단한 컴포넌트를 만드는 것
  • 이렇게 만들어진 컴포넌트간의 관계를 정의하고 유기적으로 연결하는 것

#2.1 Reusable Components with JSX + Props#2.2 Dynamic Component Generation

---

jsx & Component 2

• React send information to your component.

function Rv(props) {
  console.log(props); // Rv 컴포넌트는 props를 argument로 가진다.
  return <h2>Her name is {props.name}.</h2>
}

function Rv({ name }) { // {name} === props.name 
      return <h2>Her name is {name}.</h2>
    }

    function App() {
      return (
        <div>
          <h1>Hello</h1>
          <Rv name="Irene" />
          <Rv name="Seulgi" />
          <Rv name="Wendy" />
          <Rv name="Joy" />
          <Rv name="Yeri" />
        </div>
      );
    }

• 위 코드는 아래처럼 더 쿨하게 작성할 수 있습니다.

function Rv({ name }) { // {name} === props.name 
  return <h2>Her name is {name}.</h2>
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Rv name="Irene" />
      <Rv name="Seulgi" />
      <Rv name="Wendy" />
      <Rv name="Joy" />
      <Rv name="Yeri" />
    </div>
  );
}

#2.2 Dynamic Component Generation

---

Array.map();

• 각각의 배열 요소에게 적용될 함수를 주고, 그 함수가 적용된 결과 값을 배열로 반환하는 메서드

const rv = [‘irene’, ‘seulgi’, ‘wendy’,‘joy’, ‘yeri’];

rv.map(member => {
    return member + ‘💕’;
}); // [‘irene💕’, ‘seulgi💕’, ‘wendy💕’,‘joy💕’, ‘yeri💕’];

참고자료

• 컴포넌트 제대로 만들기 https://hyunseob.github.io/2019/06/02/react-component-the-right-way/

#2.3 .map Recap

---

Props, key

#2.4 Protection with PropTypes

---

prop types

• 컴포넌트의 props 타입을 체크
• 유효한 props인지를 검사 해주는 역할
• 설치 방법

$ npm i prop-types

• 설치 확인은 package.json 파일에서 가능

import PropTypes from "prop-types";

Song.propTypes = {
    title: PropTypes.string.isRequired,
  albumart: PropTypes.string.isRequired,
  ratings: PropTypes.number.isRequired
}

• 이 과정에서 이유를 알 수 없는 이상한 에러가 생길 경우 npm i 사용

참고자료

• https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html

#3 State

#3.0 Class Components and State

---

State

• state는 동적인 데이터들과 함께 다룸
• class component에 속함
• 컴포넌트의 data를 넣을 공간을 가지는 객체

컴포넌트의 종류

• function component

function App() {
    return (
        <h1>Title</h1>
    )
};

• class component

class App extends React.Component{ // react로 부터 확장 됨
    render(){ // function이 아니기 때문에 return 대신 render method를 가짐
        return <h1>Title</h1>
    }
}

// react는 자동으로 class component의 render method를 실행함

#3.1 All you need to know about State

---

setState()

• Do not mutate state directly.
• setState() 를 호출할 때마다, react는 새로운 state와 함께 render function을 호출(rerender)합니다. (매우 중요!)

class App extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    this.setState(current => ({count: current.count + 1}));
    // current === this.state 
    // setState 할 때 react를 외부에 의존시키지 않는 가장 좋은 방법
  };
  minus = () => {
    this.setState(current => ({count: current.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>
    );
  }
}

#3.2 Component Life Cycle

---

Mounting

• constructor()
• render()
• componentDidMount()

Updating

• setState가 실행될 때마다 실행
• componentWillUpdate()
• render()
• componentDidUpdate()

#3.3 Planning the Movie Component

---

• state 선언은 필수가 아님

#4 Making the Movie App

#4.0 Fetching Movies from API

---

axios

• 설치

$ npm i axios

YTS Proxy API

• By Nicolas
• Github URL
• How to Use

import axios from 'axios'; // Dont forget it!

componentDidMount() {
  axios.get('dd');
}

async, await

• async function은 비동기 함수
• axios.get()가 데이터를 가져오는 속도가 느리기 때문에 이를 기다리게 하기 위해 async , await 을 사용

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

#4.3 Adding Genres

---

• Javascript에서 class는 ES6의 class를 의미하기 때문에 jsx에서 html에 class를 주고 싶을 경우 다음과 같이 사용

<div className="container">
    <label htmlFor="input-label"></label>
</div>