React 문법

ES6  화살표 함수 : 화살표 함수는 기존 함수 표현식과 this를 다르게 정의합니다.

기존 함수 표현식은 자기 자신을 this 객체로 정의하지만, 화살표 함수 표현식은 자기 자신을 this를 생성하지 않고, 감싸고 있는 본문 컨텍스트로 정의합니다.

es5 

Search({key: API_KEY, term: 'surfboards'}, function (data) {
    // data 는 반환값
    this.setState({videos: data});

});

es6

YTSearch({key: API_KEY, term: 'surfboards'},  (videos) => {
    // this.setState({videos: videos});
    this.setState({videos});

});

es6에서는 key와 value가 같으면 value 하나만 적어도 된다.

바닐라 스크립트 : 라이브러리 없이 사용하는 순수 자바 스크립트

jsx를 쓰는 이유 : 자바스크립트로 된 코드가 더 길고, 가독성이 안좋기 때문

babeljs.io에 jsx코드를 입력하면 자바스크립트로 변환해주니 여기서 확인할 수 있다.

import

코드에서 import하는 것들은 “/node_module”에 설치된 모듈을 import하는 것이다.

react library :  컴퍼넌트를 생성하고, 리액트 컴퍼넌트가 어떻게 작동하는지 알고 있음.

react-dom library : 실제로 DOM에 렌더링하는 기능을 함

아래 두개는 같은 것을 의미한다.

es5 : const Root = function()  { }

es6 : const Root = () =>  { }

import React, {Component} from 'react';

== const Component = React.Component;

react 라이브러리는 항상 불러와야한다. jsx를 순수 자바스크립트로 변홯ㄴ할 때마다 React.createElement와 같은 형태로 변화되기 때문이다.

react에도 이벤트핸들러가 있다.

state는 유저 이벤트를 저장하고 반응하는데 이용된다.

state는 사용하기전에 초기화해야한다.

그래서 constructor에서 초기화한다.

constructor에서는 this.state

constructor 밖에서는 this.setState

컴퍼넌트 스테이트가 바뀔 때마다 컴퍼넌트는 즉시 리렌더링되고, 자식 요소들도 리렌더링된다.

ReactDOM.render(<Root />, document.getElementById('root'));
 == ReactDOM.render(<Root />, document.querySelector('root'));

같은 역할을 하지만 지원하는 기능과 속도차이가 있다. 자세히 찾아보진 않음.

자세한 설명

https://hashcode.co.kr/questions/5692/%EA%B0%95%EC%9D%98-4-11-queryselector%EC%97%90-%EC%84%B1%EB%8A%A5%EB%AC%B8%EC%A0%9C%EC%97%90-%EB%8C%80%ED%95%B4-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4

props

import React from 'react';

const VideoListItem = (props) => {

     const video = props.video;

    return (
        <li>Video</li>
);
}

export default VideoListItem;

위의 코드와 아래코드가 동일함

import React from 'react';

const VideoListItem = ({video}) => {

    return (
        <li>Video</li>
);
}

export default VideoListItem;

///

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {videos: [] }; // []는 array


        YTSearch({key: API_KEY, term: '팀노바'},  (data) => {
            // data 는 반환값
            this.setState({videos: data});

        });
    }

    render() {
        return (
            <div>

            <SearchBar/><VideoDetail video={this.state.videos[0]}/>
            <VideoList videos={this.state.videos}/>

            <AppTemplate
            counter={<CounterContainer />}
            todos={<TodosContainer />}
        />
            </div>
    );
    }
}

export default App;

import React from 'react';


const VideoDetail = ({video}) => {




    const videoId = video.id.videoId;
    const url =  `https://www.youtube.com/embed/${videoId}`;

    return (
        <div className="video-detail col-md-8">
            <div className ="embed-responsive embed-responsive-16by9">
                <iframe className="embed-responsive-item" src={url}></iframe>
            </div>
            <div className="details">
            <div>{video.snippet.title}</div>
            <div>{video.snippet.description}</div>
            </div>
        </div>
);
};

export default VideoDetail;

이렇게 했을 때 

TypeError: Cannot read property 'id' of undefined

라는 에러가 발생한다.

그 이유는 App컴퍼넌트의 생성자에서 데이터를 불러오는 동안, 렌더링을 한다.

그 때 Videotail 컴퍼넌트로 렌더링을 하는데, 그 때 video prop data가 없으니 에러가 발생한다.

import React from 'react';


const VideoDetail = ({video}) => {


    if (!video) {
        return <div> Loading... </div>;
    }

    const videoId = video.id.videoId;
    const url =  `https://www.youtube.com/embed/${videoId}`;

    return (
        <div className="video-detail col-md-8">
            <div className ="embed-responsive embed-responsive-16by9">
                <iframe className="embed-responsive-item" src={url}></iframe>
            </div>
            <div className="details">
            <div>{video.snippet.title}</div>
            <div>{video.snippet.description}</div>
            </div>
        </div>
);
};

export default VideoDetail;

이와 같이 video 값이 있는지 확인 후 렌더링할 수 있게 하면 됨

// export default function()

export default => import 하는 곳에서 무조건 내보내기

export default function () {
    return [
        {title : 'javascript'},
        {title : 'harry porter'},
        {title : 'The Dark Tower'},
        {title : 'Ruby'},
    ]
}

출처 : https://stackoverflow.com/questions/36426521/what-does-export-default-do-in-jsx/36426988

jsx에서는 li태그에 키를 넣어야한다. 키 특성답게 유니크해야함

renderList () {
    return this.props.books.map((book) => {
        return (
            <li key={book.title} className = "list-group-item">{book.title}</li>
        )
    });
}