리액트15 리액트 useState() Hook : 함수형 컴포넌트로 state 관리하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. useState() 메소드로 state 관리 및 조작하기 최초 리액트가 등장했을 때는 state를 다룰 필요가 있을 경우 class 기반으로 컴포넌트를 만들고, state 조작이 필요없는 경우에 함수형 컴포넌트로 만드는 방식이 표준이었다. 그러나 리액트가 업데이트 되면서 함수형 컴포넌트에서도 state를 관리할 수 있게 진화했다.(그러나 강의가 촬영된 시점을 기준으로, 여전히 실무에서는 class 컴포넌트로 state를 관리하는게 대체로 표준이라고 한다.) 기.. 2019. 12. 5. 리액트 실습 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. (15) 리액트 *Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다. *https://soldonii.github.io에서 2019년 7월 19일(금)에 작성한 글을 티스토리로 옮겨온 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트란? JQuery는 훌륭한 library지만, 각 코드가 다른 코드에 종속되는 dependency의 문제가 심하기 때문에 코드 작성에 많은 어려움을 줄 뿐 아니라, 문제를 tracking하기도 힘들고, 결과적으로 web이 느리게 동작되는 문제를 발생시켰다는 점을 배웠다. 페이스북이 만든 Re.. 2019. 8. 27. 이전 1 2 다음
