React

🦴FrameWork(프레임워크)란?🦴

대중적으로 알려진 프레임워크란 "소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것"라고 한다.
즉, 프레임워크는 뼈대, 기반이되는 구조를 뜻한다.
JavaScript FrameWork로는 ReactJS,

장점

프레임워크를 사용하면 프로그램을 편리하고 빠르게 만들 수 있어 생산성이 향상된다.
체계적으로 만들어지기 때문에 유지보수가 용이하다.

📚Library(라이브러리)란?

재사용이 가능한 코드로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 사용할 수 있도록 class나 function으로 만들어진것.

장점

코드의 중복을 줄여 가독성을 높이고 유지보수가 용이하다.
프로그래밍 시간을 단축시킬 수 있다.

물론 위의 두개의 장점은 잘 다룰때의 경우이다^^..

즉, 프레임워크는 내가 개발을 하기위해 지켜야하는 규칙, 틀 이라고 할 수 있고 라이브러리는 내가 개발을 하기위해 필요한 것이 미리 구현되어 있는 것이라고 할 수 있다.

⚛️React란?

React란 facebook에서 제공해주는 라이브러리로 component기반으로 되어있다.

SPA(Single Page Application)란?

기존의 웹 서비스는 Response시마다 서버로부터 resource와 data를 읽어 화면에 rendering하는 방식이였다.
SPA는 최초에 한번만 페이지 전체를 로드하고, 이후에는 변화가 발생하는 부분만 Rerendering하는 방식이다.

component 란?

component는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같다.

리액트에서의 컴포넌트는 자바스크립트에서의 함수와 같다.
컴포넌트는 input으로 props를 받고 화면에 표시할 element를 반환해 준다.

App.js

import React, {Component} from 'react';
import Content from './components/Content'

<div className="App">
  <Content
  	title={_title}
  	desc={_desc}>
  </Content>
</div>

component

import React, { Component } from 'react';

class Content extends Component {
    render() {
      return(
        <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
        </article>
      )
  	}
}

export default Content;

class Content가 하나의 component이다. props를 받고 React의 Element를 반환한다.

여기서 props란 컴포넌트끼리 값을 전달하는 수단이다.
부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 말하는데 자식컴포넌트에서 전달 받은 props를 변경하는것은 불가능하고 props를 전달해준 최상위 부모 컴포넌트에서만 props를 변경할 수 있다.

state란?

state는 동적인 데이터를 다룰 때 사용한다.
사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용한다.
state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능한데 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.
주의해야할 점은 props로 넘겨줄 때에 this의 binding을 신경써줘야 한다.

추후 내용 추가..