[React & Redux] 1강. React(리액트) 소개

Udemy의 모던리액트와 리덕스 강의를 들으며 Java Script를 공부중!

https://www.udemy.com/react-redux-korean/

* 강의 목표 : 유저가 유투브 비디오를 검색할 수 있는 어플리케이션 제작

* 핵심 토픽 : JSX, Component, State

* ES6 관련 토픽 : 화살표함수, class, import, export

#Part1. Component생성

1. 보일러 프로젝트 : 재사용 가능하고 적은 수정만으로 여러 곳에 활용이 가능한 소스코드.

[Our project files]  ->  Tooling (트랜스파일)    -> index.html / application.js / style.css  -> browser

conponent_1.js               Webpack

conponent_2.js               Babel

React.js

바로 브라우저에서        코드를 같은 수준의

작동할 수 없음.            다른 언어로 바꿔주는 과정

2. React : Java Script의 라이브러리. 웹브라우저에 보여지는 HTML을 만드는 라이브러리.

3. Component : HTML을 만드는 자바스크립트의 함수의 모음집.

  각 파일당 1개의 컴포넌트를 생성함.

[2STEP]

1) 새로운 component생성. 이 component는 HTML을 생성함.
   (Create a new component. This component should be produce some HTML)  

const App = function() {
    return <div>Hi!</div>;
}
 
//const ->ES6상수(절대 변하지 않는 값) 선언 
//var -> 변수선언, ES6에서는 사용하지 않음. 
 
//자바스크립트 안에는 HTML이 들어갈 수 없음. 여기서 Hi!는 JSX.
//JSX는 부분적인 템플릿 혹은 변형된 자바스크립트. 궁극적으로 JS를 HTML로 만들기 위한 것.
//JSX는 바닐라 자바스크립트같은 평범한 자바스크립트로 변경됨.

2) HTML로 이루어진 이 컴포넌트를 가져와서 이를 DOM안에 넣어라. (페이지 삽입)

       (Take this component's generated HTML and put it on the page(in the DOM))

ReactDOM.render(<App />, document.querySelector('.container'));
 
//react 가 요소를 DOM에 렌더링한다.
//component를 만들때마다 JSX태그를 감싸면 잘 작동! < />
//'container'라는 class 를 가진 div를 찾고(index.html에서!),
//이 div에 App component를 렌더링 하라.

4. JSX : Java Script안에서 HTML처럼 보이는 것.

5. 바닐라 자바스크립트 : 프레임워크나 라이브러리 없이 순수한 자바스크립트

ES6 구문 같은 JSX의 const는 브라우저에 의해 해석될 수 없음.

웹팩, 바벨과 같은 보일러 프로젝트 패키지의 목적은 JSX를 바닐라 자바스크립트로 변환해, 브라우저가 이해할 수 있게 만든다는 것.

http://babeljs.io/repl

*JSX의 사용이유 : Java Script 코드를 궁극적으로 HTML로 만들기 위한 것. 컴포넌트를 더욱 깔끔하고 보기 좋게 만들기 위해.

6. React vs. ReactDOM

/*
react를 우리가 설치한 모듈에서 가져오라는 뜻. 
node_modules폴더의 react를 불러와 React변수에 할당함.
react 라이브러리 2개 : react & react dom
reactDOM은 실제 DOM과 상호작용하는 반면, react는 컴포넌트를 생성하고 관리함.
*/
 
import React from 'react';
import ReactDOM from 'react-dom';
 
import SearchBar from 'search_bar';

React is not defined 에러메시지를 해결하기 위한 코드.

리액트는 두개의 라이브러리로 나누어짐.

1) React : 컴포넌트를 생성하고 관리함

2) React DOM : 실제로 DOM에 렌더링 되는 기능을 가지고, 컴포넌트를 가져와 DoM에 삽입하는 라이브러리 (DOM과 실제로 상호작용)

7. Component Instance vs. Component Class

잘못된 컴포넌트 요소 에러메시지를 해결하기 위한 내용.

1) 우리가 컴포넌트를 생성할 때, App의 많은 Instance를 가질 수 있는데, 이는 Instance가 아니라 Class라고 부름.

    (ReactDOM.render을 통해 "App"이라는  Class를 전달함. Instance가 아니었음.)

2) 따라서, DOM을 렌더링하기 전에, 컴포넌트를 "인스턴스화" 해야함.

3) "인스턴스화 " = JSX기반의 형태로 적어야 함.

   (ReactDom.render(<App/>);)

8. API Key

//API key를 상수로 선언함.
const API_KEY = 'A';

npm package manager을 통해 설치함. --save 라는 명령어는

이를 pakage.json 파일에 자동으로 저장해달라는 의미

npm install --save youtube-api-search

9. Import & Export

1) Export

import React from 'react';
 
const SearchBar = () => {
    return <input />;
};
 
export default SearchBar;
//이 어플리케이션의 어떤 곳에서도 이 검색바 컴포넌트를 불러올 수 있게 함.

2) Import

import React from 'react';
import ReactDOM from 'react-dom';
 
import SearchBar from './components/search_bar';
 
const App = function() {
    return (
        <div>
            <SearchBar />
        </div>
    );
}
 
ReactDOM.render(<App />, document.querySelector('.container'));
 

#Part2. Class Component

요약 :

유저가 검색어를 입력할 때마다, 우선 스테이트를 업데이트 하여 전체 컴포넌트를 리렌더링함. 제어컴포넌트는 스테이트로부터 값을 받는 것을 알림으로써, 컴포넌트를 제어.

10. 함수형 Component vs. 클래스 Coponent

1) 함수형 컴포넌트 : 함수로 이루어짐. 한 함수가 JSX 형태를 반환. (검색바)

어떤 정보와 JSX로 분리될 때 사용.

함수형 컴포넌트는 클래스 컴포넌트를 가질 수 있음.

2) 클래스 컴포넌트 : 내부적인 정보를 저장하려고 할 때 사용됨. ES6를 사용하여 만듦.

실제 자바스크립트의 properties & method로 이루어짐.

State를 파악할 필요가 있을 때 사용 됨.  (데이터가 바뀌고 있거나, 유저이벤트반응을 위해 렌더링 되는 과정에서)

어떤것을 선택하는지에 대한 구분은 앞으로 더 배워갈 예정

import React from 'react';
 
class SearchBar extends React.Component{
    render () {
        return <input />;
    }
}
//SearchBar 클래스를 생성하고, React.Component로부터 모든 기능을 제공(상속) 받으라는 것.
// = React.Component 클래스에게 상속받은 기능을 제공한다는 것.

[2가지의 tip]

1) ES6 구문을 활용해 코드를 다듬기. (문법적 설탕)

import React, { Component} from 'react';
// const Component = React.Component;
//의 의미와 동일. react라이브러리를 불러와, Component라 부르는 변수를 프로퍼티 형태로 가져오라는 것.
 

2) 여기 class 에 어떤 일이 일어나는가?

다른 컴포넌트와 소통하기 위한 업그레이드! -> 클래스를 정의하고, 어떤 것을 상속받음.

클래스 컴포넌트를 생성할 때마다, 항상 render 메소드를 정의하고, JSX를 반환해야만 함! (안그러면 에러남)

11. User Event Handling : 유저가 타이핑 할때 감지하는 방법

[2STEP]

1) Event Handler 선언

Event Handler : 이벤트가 발생할 때마다 실행되는 함수 (이 경우엔 인풋요소 텍스트가 변하는 것을 알기위함)

함수의 이름 :  handle/on + 보고싶은 요소의 이름 + 이벤트의 이름

2) 이 Event Handler 를 살펴보려는 요소에 전달

import React, { Component} from 'react';
 
class SearchBar extends React.Component{
    render () {
        return <input onChange={this.onInputChange} />;
    }
 
    onInputChange (event) {
        console.log(event.target.value);
    }
    //Event Handler
    //event의 수많은 값들 중 target.value만을 보여줌.
}
 
export default SearchBar;

[더 나아가기] 화살표 함수를 이용해 console.log부분을 간결하게 바꾸기

class SearchBar extends React.Component{
    render () {
        return <input onChange={ (event) => console.log(event.target.value)} />;
    // 이 모든 내용이 한 줄에 들어있으면 (event) 를 event라고만 써도 됨.
    }
 
    //Event Handler
    //event의 수많은 값들 중 target.value만을 보여줌.
}

12. State

: JS의 객체로서, 유저 이벤트를 저장하고 반응하는데 이용됨.

: 컴포넌트 기반의 클래스는 그 자체의 state 객체를 가짐.

: 컴포넌트 state가 바뀔 때마다, 컴포넌트는 즉시 rerendering(render함수 재실행) 하고, 자식 요소들에게도 rendering 하도록 강제함.

: state 를 사용하기 전, state 객체를 초기화 해야함.

: state를 업데이트 함으로써, change이벤트가 발생할 때, 전체 컴포넌트가 리렌더링 된다.

*this.setState를 호출함으로써, state를 업데이트 한다.

import React, { Component} from 'react';
// const Component = React.Component;
//의 의미와 동일. react라이브러리를 불러와, Component라 부르는 변수를 프로퍼티 형태로 가져오라는 것.
 
class SearchBar extends React.Component{
    constructor(props) {
        super(props);
 
        this.state = { term: ''};
        //== 이 state를 사용할 때마다, 새로운 오브젝트를 생성하며 초기화!
        // 그리고 이를, this.state라는 object에 할당
        //this.state 값은 컴포넌트 안 다른 곳에서는 항상 this.setState로 변경됨.
        // term은 search term을 의미하는 프로퍼티 (이름은 마음대로)
        //오직 constructor 함수 안에서만 이런 코드로 state변화가능.
    }
    //state를 정의하거나 재실행하는 방법. 
    //이 함수는 첫번째로 시작되고, class가 생성될때마다 자동으로 실행.
    //== 항상 실행됨! 새 인스턴스가 생성될 때마다 불려지기 때문.
    //변수나 상태값을 초기화 하는 등에 주로 이용됨.
    //함수형 컴포넌트는 state를 가지지 않음.
    //모든 JS class는 특별한 함수인 constructor 가 있음.
 
    render () {
        return (
            <div>
                <input onChange={ (event) => this.setState({ term: event.target.value })} />;
            Value of the input: {this.state.term}
            //이 구문은 input의 실시간 반영이 가능한지 확인하는 용. this.state.term은 변수를 불러온것.            
            </div>
        );
    // 이 모든 내용이 한 줄에 들어있으면 (event) 를 event라고만 써도 됨.
    //this.setState로만 값의 조정이 가능함! setState는 지속적으로 유지되게 함.
    }
 
    //Event Handler
    //console.log(event.target.value) 는 event의 수많은 값들 중 target.value만을 보여줌.
}
 
//SearchBar 클래스를 생성하고, React.Component로부터 모든 기능을 제공받으라는 것.
// = React.Component 클래스에게 받은 기능을 제공한다는 것.
 
export default SearchBar;
//이 어플리케이션의 어떤 곳에서도 이 검색바 컴포넌트를 불러올 수 있게 함.
//import SearchBar from 'search_bar'; 라고 index.js에 써주면서 부름.
 

13. 제어 컴포넌트 (혼돈의 카오스 ㅠㅠ)

import React, { Component} from 'react';
class SearchBar extends React.Component{
    constructor(props) {
        super(props);
 
        this.state = { term: ''};
        
    }
    
    render () {
        return (
            <div>
                <input 
                    value={this.state.term}
                    //this.state 의 term값을 가져와서 인풋값을 렌더링 함.
                    //onChange 핸들러가 실행될 때마다, 인풋값은 실제로 바뀌지는 않게됨! (중요)
                    onChange={ (event) => this.setState({ term: event.target.value })} />;
            
                Value of the input: {this.state.term}
            //이 구문은 input의 실시간 반영이 가능한지 확인하는 용. this.state.term은 변수를 불러온것.            
            </div>
        );
    }
}
export default SearchBar;