GIDO GIDO

React Hooks란 무엇인가? ReactConf 2018에서 발표된, class없이 state를 사용할 수 있는 새로운 기능. - React Hooks의 필요성 React Component는 Class Component와 Functional Component로 나뉨 Class Component -> 더 많은 기능 제공, 더 긴 코드 양, 더 복잡한 코드, 더딘 성능 Functional Component -> 더 적은 기능 제공, 짧은 코드 양, 더 심플한 코드, 더 빠른 성능 Functional Component를 왜 사용하지 않을까? 리액트의 생명주기를 사용하지 못하기 때문. (Mounting, Updating, Unmounting) => 이런 불편함 때문에 Hooks를 사용한다. Class Com..

05. To-Do 앱 만들기 시작 - 원래 있던 부분 지우기 App.js , App.css , index.css → 안쪽 내용만 삭제 (파일 삭제X) → npm run start 로 앱 실행시 아무것도 없어야 정상 - 바탕 색 바꾸기 index. css 에 작성 (index.css 파일은 index.js 파일에서 import) #index.js 파일에서 import 부분 삭제 시 변경사항 저장X body { background-color: aliceblue; } - 함수형 / 클래스형의 차이는 render() → 함수형은 render() 필요X, 클래스형은 render() 필요함 export default class App extends Component { render() { return( 안녕하세요...

01. Create React App으로 실행된 리액트의 기본 구조 살펴보기 npx create-react-app 으로 설치 시 폴더와 파일이 생성된다. - 이름이 수정되면 안되는 파일들 ① public/index.html → 페이지 템플릿 ② src/index.js → 자바스크립트 시작점 - public 여기에 쓰인 파일들은 오직 public.index.html만 쓰일 수 있다. - src 대부분의 리액트 소스 코드들을 이곳에 작성한다. JS 파일과 CSS 파일을 이곳에 넣으면 되며, Webpack은 이곳에 있는 파일만 본다. 즉, 이 폴더 이외에 것은 Webpack에 의해 처리되지 않는다. - Package.json 해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 ..

01. 리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. - 웹 앱을 개발하는 다른 툴과 비교 (Vue, Angualar) Vue, Angualar React 프레임워크 라이브러리 - 프레임워크와 라이브러리의 차이 프레임워크란 ? → 앱을 개발하기 위해 필요한 것들을 제공. #개발자가 개발을 쉽게 할 수 있도록 뼈대를 제공하는 것이라고 할 수 있겠다. 라이브러리란 ? → 특정 기능을 모듈화(Modularization, 생산성·최적화·관리에 용이하게 모듈단위로 분할하는 것) 해놓은 것. #재사용이 가능한 기능을 미리 구현해놓은 것이라고 할 수 있겠다. 코드는 프레임워크에 의해 사용된다. → 코드는 프레임워크의 틀 안에서 수동적으로 동작한다. 반면, 라이..