FrontEnd (65) 썸네일형 리스트형 [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는 마지막으로 웹팩이나 바벨이 싹다 정리해서 하나의 자바스크립트 파일로 만들었을 때의 파일임. [Error] POST https://localhost:3000/ 404 이틀동안 고치지 못한 문제. 원인이야 어찌됬든, 네트워크, 리액트, 리덕트, 덩크, 장고 이것들을 제대로 이해하고 코딩한게 아니기에 이런 결과가 나온 것 같다. 그래서 다시 처음으로 돌아가서 공부하고자 한다. 그리고 해답을 찾았을 때 다시 도전하자 [FrontEnd]FacebookLogin https://www.npmjs.com/package/react-facebook-login 리액트에 facebook로그인을 도와주는 컴포넌트가 이미 존재함 고로 다운받아 쓰면 되는데 yarn으로 설치하면 계속 오류가 뜸... 이거 때문에 node_modules을 통채로 지웠다 다시 받는다고 고생했... 여튼 메뉴얼 보고 따라 하면 됨 우리 같은 경우 다음과 같이 속성을 추가해주는데 appId는 페북 개발자 도구에서 ID를 말하는거고fields같은 경우에는 어떤 데이터를 가져오냐인듯callback은 어떤 함수를 불러올꺼냐인데 _handleFacebookLogin = response => { console.log(response); } 일단은 콘솔로그로 확인하도록 했음 cssClass를 따로 입력 할 수 있.. [FrontEnd]로그인 폼 submit! import React, { Component } from "react";import LoginForm from "./presenter"; class Container extends Component{ state = { username : "", password : "" }; render() { const {username, password} = this.state; return ; } _handleInputChange = event => { //console.log(event.target.value) const {target : {value,name} } = event; this.setState({ [name] : value //[]는 변수 선언이 아니라 변수 자체를 불러오는 것(username,pas.. 이전 1 2 3 4 5 6 ··· 9 다음
