FrontEnd/React (41) 썸네일형 리스트형 [React]props가 Null일 때 위의 코드는 아래 에러를 발생한다. import React from 'react'; const VideoDetail = ({videos})=> { const videoId = videos.id.videoId; const url = `http://www.youtube.com/embed/${videoId}`; return ( {videos.snippet.title} {videos.snippet.description} );}; export default VideoDetail; 비디오 디테일은 다음을 리턴한다.리턴에는 props의 videos들이 있다. 왜 그런데 videos가 정의되어 있지 않다는 오류가 뜰까? 다시 위 코드를 보면 최초에 constructor가 state를 초기화 시킨다. 이후에 Youtub.. [React]YoutubeSearch API 사용 및 state 예시 import React, {Component} from 'react';import ReactDOM from 'react-dom';import YoutubeSearch from 'youtube-api-search'; import SearchBar from './component/search_bar';import VideoList from './component/video_list'; const API_KEY = "AIzaSyCWXQgf9WZ2bADCMhJwccOZsXpivTIxfo8"; class App extends Component { constructor(props){ super(props) this.state= { videos : [] }; YoutubeSearch({ key : API_KEY, 검.. [React] state 및 this문제 state란유저 이벤트를 저장하고 반응하는데 이용된다. 모든 클래스 컴포넌트는스테이트 객체를 가지고 있고이 스테이트가 변화할 때마다 재렌더링하고자식컴포넌트도 재렌더링한다. constructor(props){ super(props) this.state ={ term : ""}; } 이를 시험하기 위해 다음과 같은 코드를 작성했다. constructor는 생성자 함수라고 하고객체를 생성하는 함수를 생성자 함수라고 부른다.보통 변수나 state를 초기화할때 사용된ㄷ고 한다. super는 부모 오브젝트의 함수를 호출할 때 사용된다. import React, { Component } from "react"; class SearchBar extends Component { constructor(props){ sup.. [React]리액트의 이벤트 핸들러 import React, { Component } from "react"; class SearchBar extends Component { render() { return } onInputChange(event){ console.log(event.target.value); }} export default SearchBar; 자세한 설명은 생략함 다만 리액트의 이벤트핸들러라기보단 자바스크립트와 HTML로도 이렇게 작동하지 않음? [React]함수형 컴포넌트와 클래스형 컴포넌트 함수형 클래스형 기능적으로는 같은 역할을 한다. 다만 클래스형은 return하는 요소들을 입력하는 것 이외에 다른 값들을 정의할 때 사용한다. 클래스형만 살펴보면 class SearchBar를 생성하고 extends(연장한다) React.Component(리액트 컴포넌트의 기능을) 으로 클래스를 정의한다 이때 React.Component대신 Component만 사용할 수 있는건 ES6기능으로 import시에 { Component } 는 const Component = React.Compontent와 같은 기능을 하기 때문이다.{속성}은 객체의 특정 속성만 불러와서 상수값으로 넣는 기능 이후에 렌더함수를 받고 리턴값을 리턴한다 이때 렌더함수를 받지 않는다면 에러! 또 함수형과 다르게 렌더 함수가 안에 있다. [React] 컴포넌트 분리 및 searchbar 영상 앱을 다음과 같이 컴포넌트를 분리했다. 그에 맞게 파일을 만들었고 search_bar에는 다음과 같이 input태그를 입력해주었다. 이때 React를 사용하지않아도 라이브러리 추가를 해줘야하는 이유는 JSX문법을 바벨과 웹팩이 번역해도 일단 저거를 이해 유지보수하기 위해서는 react가 필요하기 때문 export defalut를 굳이 해주는 이유는 필요한 것들만 골라서 export하고 싶어서라고 한다. 그리고 import React from 'react';import ReactDOM from 'react-dom'; import SearchBar from './component/search_bar'; const App =() => { return ( );} ReactDOM.render(, docume.. [React&Redux]리액트란? 이제까지 리액트를 아무렇지 않게 써왔다. 뷰를 위한 것 컴포넌트를 작성하는 것. 어떤 코드가 어떤 라이브러리가 어떤 역할을 하는지 생각 해본 적 없이. 컴포넌트를 생성하기 위한 코드이다. const App = function(){ return Hi!;} App이란 상수값은 함수이며 return으로 JSX문법으로 Hi!를 리턴할 것이다. 이것은 React의 역할이 아닌 babel과 webpack의 역할이다. 자 그럼 이것을 렌더링 하기 위해서 리액트가 필요할 것이다. import React from 'react';React.render(App); react라이브러리를 불러온다. 이 때 경로가 없이 불러오는 것은 모두 node_modules에 위치하는 것이다. 위의 코드를 실행하면 에러가 발생한다. 이유는 .. [React&Redux]보일러 프로젝트를 통한 리덕스 https://github.com/StephenGrider/ReduxSimpleStarter.git 다음 주소를 clone 하고 npm을 설치하자 우리가 만들 앱 형태는 다음과 같음 리덕트는 사용하지 않을거임 앱을 설명하면 search부분에서 검색을 하면 우측의 Video들이 바뀌게 되고 Video를 클릭하면 왼쪽측의 Video들이 실행되어 질것 처음 시작하는 프로젝트를 열어보면 다음과 같은 셋팅 우리는 서버를 열어서 index.html을 실행시킬 것 div class= container는 컴포넌트들이 담길 root이고 bundle.js는 마지막으로 웹팩이나 바벨이 싹다 정리해서 하나의 자바스크립트 파일로 만들었을 때의 파일임. 이전 1 2 3 4 5 6 다음
