끄적끄적 코딩
article thumbnail
[React] Class Component, Function Component
React 2021. 2. 3. 09:41

클래스형 컴포넌트, 함수형 컴포넌트 비교 선언 방식 함수형 컴포넌트가 선언이 더 편함 class component - class 키워드 필요 - Component로 상속을 받아야함 - render() 메소드가 필요 일반적인 차이 - 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용 (함수형 컴포넌트는 훅스로 해결) - 함수형 컴포넌트는 메모리 자원을 덜 사용한다는 장점 - state선언 방식, props를 가져오는 방식, event handling을 하는 방식이 조금씩 다름 *props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 *hook : 함수컴포넌트에서 클래스 구성 요소처럼 및 를 사용할 수 있도록하는 함수 주요 hook : useState, useEffec..

article thumbnail
[React] Webpack, Babel, Create React App
React 2021. 2. 3. 09:38

웹팩이란 - Module bundler 라이브러리 *Module bundler : 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리 웹페이지에서는 페이지를 보여주기 위한 수 많은 자바스크립트 파일을 서버에 요청 - 서버와 여러번 통신 - 비효율 => 여러개의 파일들을 Module bundler로 한번에 처리해서 위의 문제를 해결 Babel이란 - 최신 문법을 특정 이전 버전의 js로 변환하는 도구 Create React App이란 - Facebook의 공식 React 웹 개발을위한 보일러 플레이트 * 보일러 플레이트 : 변형이 거의 또는 전혀없이 여러 위치에서 반복되는 코드 섹션 - 모든 개발환경을 설정하지 않아도 되고 페이스북에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용 - ..

article thumbnail
[React] 리액트 커뮤니티 사이트
React 2021. 2. 3. 09:28

레딧 : https://www.reddit.com/r/reactjs/ /r/ReactJS - The Front Page of React • r/reactjs A community for learning and developing web applications using React by Facebook. www.reddit.com Hsahnode : https://hashnode.com/n/reactjs #reactjs on Hashnode React (40878 followers · 5936 posts) - React is a JavaScript library for building user interfaces. hashnode.com stack overflow : https://stackoverflow..

article thumbnail
[React] One way data binding, Two way data binding
React 2021. 2. 3. 09:25

단방향 데이터 바인딩 - 처음 모델이 가진 값을 뷰에 표현하고 나중에 모델이 변경되더라도 업데이트 되지 않음 양방향 데이터 바인딩 - 모델을 뷰에 바인딩함과 동시에 이후 모델이 변경되는 경우를 감지하여 지속적으로 뷰를 업데이트 해줌 * 데이터 바인딩 : 화면에 보이는 데이터와 브라우저 메모리에있는 데이터를 일치시키는 방법 차이 - HTML에서 변경된 내용이 데이터 영향을 미치는가 리액트 - React와 같은 단방향 데이터 바인딩은 Javascript -> HTML로 데이터 바인딩만 가능 이벤트를 통해 다시 화면에 뿌려주는 과정이 필요 two way data binding 장점 모델, 뷰 동기화 - 데이터 변화를 감지하여 모델과 뷰가 같도록 만들어줌. (단방향은 같게하기위한 추가적인 코드가 필요) 코드량 ..

[React] JSX란?
React 2021. 2. 3. 09:13

JSX - 자바스크립트를 확장한 문법 const element = Hello, world!; - JSX에 표현식 포함 const name = 'Jeseong Lee'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); => JSX의 중괄호 안에 유효한 JavaScript 표현식을 넣을 수 있음 - JSX는 표현식 function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } return Hello, Stranger.; } => JSX 표현식은 JavaScript 객체로 처리됨 - JSX로 속성 정의 const ele..

article thumbnail
[React] DOM, Virtual DOM
React 2021. 2. 3. 09:12

DOM - 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체 - 이 객체를 이용해서 웹 페이지 구성요소를 제어 가능 Virtual DOM - DOM을 추상화한 가상의 객체 DOM 컴포넌트 상태 변경 -> DOM 트리 업데이트 -> 실제 DOM 업데이트 Virtual DOM 컴포넌트 상태 변경 -> 현재 가상 DOM과 이전 가상 DOM 비교 -> 어떤 가상 DOM 객체가 변경 되었는지 확인 -> 실제 DOM에서 해당 객체만 업데이트 Virtual DOM의 장점 - 상태 변경 -> Virtual DOM에 적용 (렌더링 되지 않으므로 연산 비용이 적음) -> 최종 변화를 실제 DOM에 적용 - DOM의 값들이 어떤것이 바뀌고 바뀌지 않았는지 파악하지 않아도 됨 (Virtual DOM이 자동으로 함) - DO..

article thumbnail
[React] Component란?
React 2021. 2. 2. 21:25

Component - UI를 구성하는 개별적인 view 단위 - 전체의 앱은 각 컴포넌트를 조립해서 만들어짐. function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render( , document.getElementById('root') ); 1. App 컴퍼넌트는 여러개의 Welcome을 가짐 2. ReactDOM.render을 통해서 App 컴퍼넌트를 호출 3. App컴퍼넌트는 각 Welcome 컴퍼넌트를 호출 (재사용) 4. 전달한 props에 따른 각각의 Welcome 컴퍼넌트 내용이 호출되는걸 확인 가능

article thumbnail
[React] Front end 비교 (Svelte, Vue, Angular, React)
React 2021. 2. 2. 20:55

* Front end : 사용자가 해당 데이터를보고 상호 작용할 수 있도록 HTML, CSS 및 JavaScript를 사용하여 데이터를 그래픽 인터페이스로 변환하는 방법 * Framework : 전체 흐름을 자체적으로 유지하고 사용자가 필요한 코드를 입력합니다. * Library : 사용자가 전체 흐름을 만들고 라이브러리를 가져 오는 곳입니다. 인기 있는 Front end 프레임워크, 라이브러리 React를 가장 많이 선호하고 사용합니다. Svelte는 최근에 인기가 많아지고 있으며 다른 프레임워크, 라이브러리에 비해 아직 사용량이 적음 커뮤니티 & 리소스 리액트의 커뮤니티와 리소스가 가장 많으며 앵귤러는 커뮤니티와 리소스가 많지만 리소스의 많은 부분이 오래되었음 뷰는 커뮤니티는 리액트보다 작지만 많으며..

검색 태그