Javascript 공부/React13 리액트 실습 2 - Monsters Rolodex *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Search Box 컴포넌트 searchBox 컴포넌트는 class 대신 함수를 이용해서 컴포넌트를 생성할 것이다. class를 이용하는 것과 함수를 이용하는 것의 근본적인 차이는 다음과 같다. 1) 컴포넌트 내부에서 state를 생성 및 조작하거나, 2) React Component 클래스에 내장된 life-cycle 메소드를 사용해야 할 경우에는 class를 이용해야 하고, 그렇지 않을 경우에는 함수를 이용할 수 있다. 단지 state를 props로.. 2019. 11. 29. 리액트 실습 1 - Monsters Rolodex *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Card-list 컴포넌트 만들기 // card-list.component.jsx 파일 import React from 'react'; export const CardList = (props) => { console.log(props); return Hello; } 새로운 컴포넌트 CardList를 만든 후, App.js에서 import할 수 있도록 export 시켰다. import React, { Component } from 'react'; impo.. 2019. 11. 29. 리액트 1 *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. create-react-app create-react-app은 개발자가 다른 것들은 신경쓰지 않고, 오로지 개발에만 집중할 수 있도록 기본적인 모듈들이 포함된 패키지이다. 이를 통해 새로운 프로젝트 폴더를 생성하면, 여러가지 폴더가 생성된다. # src 폴더 : react app과 관련된 모든 코드들이 들어있는 공간이다. 앱을 개발하면서 필요한 파일들을 저장하는 곳이라 보면 된다. # public 폴더 : create-react-app 패키지에는 bab.. 2019. 11. 20. 리액트의 탄생배경과 핵심 개념 *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트의 탄생 배경 리액트의 등장 이전에도 프론트엔드 단에 수 많은 라이브러리/프레임워크가 존재했다.(jQuery, Vue.js, Angular.js 등) 제이쿼리의 경우, 여러 종류의 웹브라우저들마다 자바스크립트를 불러오는 방식이 달라 어려웠던 점을 해결해주었다. 브라우저들 간에 통일성을 가지도록 도와주면서 큰 인기를 끌었었다. 시간이 흐르면서 web app의 크기가 커지자, 자바스크립트 파일이 넘쳐나면서 통제가 어려워졌고, 이를 효율적으로 관리하기 .. 2019. 11. 20. 이전 1 2 다음
