📘 리액트 프로젝트 시작하기 ✅ 리액트란 무엇인가? 페이스북에서 개발하고 관리하는 UI 라이브러리 리액트는 UI 기능만 제공 ( 앵귤러가 웹앱 개발에 필요한 다수의 기능을 제공하는 것과는 달리) 따라서 전역상태관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야한다. 전반전인 시스템을 직접 구축하기 때문에 자유롭다는 장점이 있지만, 개발 환경을 직접 구축해야하는 번거로움이 있다. 리액트 팀에서 create-react-app이라는 툴을 제공해서 어느정도 이 단점을 보완해준다. 프론트엔드 프레임워크를 사용하는 이유는? 자동으로 UI를 업데이트 해준다는 장점! UI = render(state) 라고 함축적으로 표현할 수 있다. render 함수는 순수함수로 작성하는 것이 좋다. - 순수함수는 입력값이 ..

section 1. 리액트 프로젝트 시작하기 1. 리액트란 무엇인가?💡 자동으로 업데이트되는 UI UI = render(state) render함수는 순수함수로 작성 순수함수란, 입력값이 같으면 출력값이 같은 함수 랜덤함수 사용 X 외부 상태 변경 X 순수함수와 불변변수를 이용하는 이유? 복잡도가 낮아지고, 버그 발생확률이 낮아짐. 렌더링 성능을 크게 향상시킬 수 있음. state는 불변 변수로 관리 가상 돔 (virtual dom) 이전 UI상태를 메모리에 유지한 뒤 변경된 부분만 실제 DOM에서 변경함 2. 리액트 개발 환경 구축하기💡 안녕하세요. root1 root2 root3 // 방법1. 그냥 반복해서 만들기 function LikeButton() { const [liked, setLiked] ..

React의 Event Handling Event Event를 사용할 때 주의사항 1. 이벤트 이름은 camelCase로 작성 => html의 onclick은 리액트JSX에서는 onClick 2. 이벤트에 실행 할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체를 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트 에는 이벤트를 설정할 수 없음 컴포넌트 생성 및 불러오기 1. EventPractice.js 생성과 App.js에서 EventPractice 불러오기 이벤트 핸들링 2. onChange 이벤트 설정 3. input에 입력한 값을 state에 저장 4. 입력한 ..

React 프로젝트 시작하기 1. react 프로젝트 생성하기 근데 나는 npx create-react-app hello-react를 사용했다! npx란 npx는 패키지를 한번 실행하는 것 npx로 실행하는 경우 로컬에 설치하지 않고 원격에 있는 최신 패키지를 실행할 수 있음 Webpack : 번들링 도구 번들링 도구 Browserify, RequireJS, Webpack 등이 대표적 리액트 프로젝트에서는 주로 Webpack을 사용 번들링 도구를 사용하면 require (또는 import)로 모듈을 불러 왔을 때 번들링 되면서 모듈들을 파일 하나로 합쳐 줌 src/index.js를 시작으로 필요한 파일을 다 불러온 후에 파일 하나로 합쳐 주는 것 css 파일도 Webpack의 CSS-Loader가 불러옴..

React & Reactive & React Native React 페이스북이 웹 개발을 쉽게하기 위해 만든 기술 커스텀 컴포넌트를 만들고, 쉽게 조합해서 손쉽게 만들 수 있음 Reactive 마이크로소프트가 창안한 개념 스트림과 비동기 처리등을 LINQ에서 영향을 받은 방법 비동기 처리를 할 수 있게 한 패러다임 ReactiveX(Rx)를 중심으로 여러 언어에 맞게 다양하게 구현되어있음 React Native 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트 기존 - 모바일 자바스크립트 Tool들이 WebView를 통해 인터페이스를 구축하는 하이브리드 방식 리액트 네이티브 - 자바스크립트로 작업하지만, 인터페이스는 네이티브 위젯으로 표시하는 방식 - 네이티브 UI를 통해 이질감 없고 ..

리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다! 컴포넌트 파일 파헤치기 이전에 만든 hello-react 프로젝트를 열어보세요. 다음과 같이 프로젝트가 구성되어 있을 것입니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다. 여기서 컴포넌트에 해당하는 코드는, App.js 에서 확인해볼 수 있습니다. 한번 열어보세요. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome ..