/ STUDY

React로 웹 앱 만들기 - React 개론

목차

내가 느낀 React

Javascript 수업에서 가장 크게 변화한 부분은 index.html 파일에서 index.js 파일로 변화했다는 점이다.

언어 Javascript React
파일 index.html index.js
연결 <script></script 사용 component 사용
Router 사용		 
import React from "react";
import ReactDOM from "react-dom";
import App from "components/App";

ReactDOM.render(
  <React.StrictMode>
    <App />
    // 여기가 componet // 이전에 HTML과 JS 파일을 연동하는데는 <script></script>{" "}
    가 사용됬었음
  </React.StrictMode>,
  document.getElementById("root")
);

가장 큰 차이점

index.js 파일에서 <App />으로 component를 render하는 구조로 변화한거를 볼 수 있다. 체감하는 차이점은 Javascript를 활용했던 경우는 HTML 파일에 풀로 덕지덕지 합쳐놓은 느낌이라면, React는 레고를 결합하는 방식으로 웹 사이트를 만드는 느낌이라고 할 수 있다.

Props

Component의 실행 순서가 되면 component와 함께 전달되는 정보들을 props라고 한다.
이때, PropTypes를 통해 props들이 원하는 Data Type으로 전달됬는지 확인할 수 있다.

State

변화하는 데이터를 사용하기 위해 사용하는 것이다. App.js 파일에서 class component를 통해 사용한다.

class App extends React.component{
    state={
        count: 0;
    };
    add = () => {
        this.setState(current => ({count: current.count+1}));
    };
    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>
        );
    }
}

위 예시는 버튼을 누르면 자동적으로 화면의 숫자가 변화하는 기능을 구현해놓은 코드다.

Life Cycle Method

  1. Mounting
    Component가 생성되는 것을 이야기한다. 프로그램의 진행 순서를 이해하면 편하다.
  • class를 생성하는 constructor가 제일 먼저 실행
  • 이후 React의 render 실행. 이때, component가 만들어짐
    이걸 바로 componentDidMount를 통해 확인할 수 있다.
    setState 함수가 실행 됬을 경우에는 componentDidUpdate가 실행된다.
  1. Unmounting
    Component가 죽는 것을 이야기한다. 아직 정확히 어떤 느낌인지 파악하지는 못했다.

map()

map()이라는 함수가 있다.

Array.map(function);

Array의 각각 element에 대해 function을 반복해서 실행한다. 반복문에 대한 느낌만 가지고 있다면 쉽게 응용할 수 있다. 가끔 Array안에 Object가 있는 경우, 헷갈리기는 한다.

자세한 것은…

다음 내용들은 노마드코더 무료강의 중 React로 웹 앱 만들기를 듣고 정리한 내용입니다.