본문 바로가기

📗 React15

[React] 리액트의 Hooks 예제로 정복하기 React Hooks functional component에서 state를 가질 수 있게 만듦 class component, componentdidMount, render() 할 필요가 없음 -> 하나의 funciton 이 됨 이것은 함수평 프로그래밍 이라는 뜻이기도 함! recompose + react = 리액트 훅! 📌Class component를 이용한 react (기존 방식) 버튼 클릭시 count 가 하나씩 증가하는 기능 import React from "react"; import './App.css'; class App extends React.Component{ state = { count: 0 }; modify = (n) => { const { count } = this.state; // .. 2021. 3. 18.

[React ] React Router를 이용하여 component간에 props 넘겨주기 ( (Link & props) react 를 이용하여 navigation bar를 간단하게 만들어보자 navigation bar를 만들어보면서 reactd에서는 페이지 간에 data를 어떻게 연결하고 공유하는지 공부해 볼 것이다. 1) react-router-dom 설치 * npm 으로 설치 npm install react-router-dom * yarn 으로 설치 yarn add react-router-dom 2) Routes 폴더 생성 routes 폴더에는 내가 만들고 싶은(이동할) 페이지 개수만큼 만든다 routes에 3개의 페이지 생성 - Home.js : 메인 영화설명 (영화를 보여주는 페이지 ) - About.js : 웹페이지 소개글 (자기소개 넣을 예정) - Datail.js : 영화 상세 설명 (영화 클릭시 상세설명 페.. 2021. 3. 18.

[React] 프로젝트 GitHub Pages 배포하기 + Axios 를통해 json data 가져오기 AXIOS fetch위에 있는 작은 layer // asios 설치 npm i axios data fetch하기 보통 Fetch 를 사용하여 data를 load 하디만 asios를 사용해보자 class App extends React.Component{ state={ isLoading: true, movies:[] }; getMovies = async() =>{ const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount(){ this.getMovies(); } render(){ const {isLoading} = this.state; return ( {.. 2021. 3. 17.

[React] setState and Lifecycle function component //function component function App() { return ( ) ; } return 한 값을 screen 에 표시 class component React class component 에서 가져온 APP component //App은 react component class App extends React.Component{ render( return () ) ; } React component에서 확장한 것들을 screen에 표시 react가 render() 메서드를 자동으로 실행 class component를 사용하는 이융 state : object ,data를 넣을 공간이 있음 data는 항상 변하기 때문에 state와 같은 공간 이 필요 sta.. 2021. 3. 16.

[ React ] JSX 이해하기 & Proptypes component HTML 을 반환하는 함수 component를 사용해서 ReactDOM.render( , document.getElementById('root') ); JSX javascrtip 안의 HTML Component를 만들고 어떻게 사용하는지 javascript + HTML의 조합 React 의 component 생성 흐름 react application은 오직 하나의 component만 rendering 따라서 -> 모든 것은 apapplication(API) 안에 들어가야함 구현하고싶은 component 파일들을 만들어 API.js에 import 하고 API.js를 index 에 렌더링하는 방식 REACT의 속성을 이용하여 component 불러오기 ❖ 정적데이터 설정 (직접 넣어준 데이.. 2021. 3. 16.

React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만들기를 해볼 예정! 오예~ 원래 리액트를 웹브라우저에서 실행하기 위해서는 브라우저는 리액트 코드를 제대로 이해하지 못하기(?) 때문에 원시코드로 변경해야 함 webpack , Babel 다운로드 -> 리액트 코드 컴파일 과정을 거쳐야 함 하지만, create react app 하나의 명령을 실행해서 React Web App 을 실행 1) createreact app을 통해 리액트 환경 구성 ex) 한단계 밖 A 디렉토리에서 생성 -> movie_app 이라는 프로젝트 폴더 생성 //npx create-react-app.. 2021. 3. 16.

이전 1 2 다음

티스토리툴바