잇스쿨

Redux용 React 바인딩은 smart and dumb components를 분리하는 아이디어를 채택하였다. 앱의 최상위 컴포넌트(라우트 핸들러같은)만이 Redux와 연관되는 것이 좋다. 그 아래의 컴포넌트들은 우직해야하고 모든 데이터를 props를 통해 전달받아야 한다. Smart Component Dumb Component 위치 최상위, 라우트 핸들러 중간과 말단 컴포넌트 Redux와 연관됨 예 아니오 데이터를 읽기 위해 Redux 상태를 구독 props에서 데이터를 읽음 데이터를 바꾸기 위해 Redux 액션을 보냄 props에서 콜백을 부름

1. npm install -g create-react-app 프로젝트 환경을 구축할 경로로 이동하여 명령어 실행 2. create-react-app [프로젝트 폴더명] ex. create-react-app redux-example 3. redux 설치 npm install --save redux react-redux 명령어 실행 (react-redux : 뷰 레이어 바인딩)

스마트폰을 예시로 들었을 때, 사용자의 입장과 제품을 만드는 제작자의 입장이 존재할 수 있다. 사용자 입장에서 스마트폰을 조작하는 장치는 "버튼"과 "화면"이라고 할 수 있다. 장치를 조작하는 장치를 "props" 제품의 내부적인 구현을 위해서 다양한 조작 장치를 가지게 하는데 이 내부적 장치들을 "state" 즉, Component 의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 props를 제공하여 조작할 수 있게 된다. 사용자에게는 알 필요가 없는 Component 내부적으로 사용되는 것들을 state 라고 한다. 아래의 코드로 자세히 알아보자. src/App.js import React, { Component } from 'react'; import Nav from './components..

샘플 코드 want-itscool Hello~ Frontend World HTML CSS JavaScript Subject1 HTML is HyperText Markup Language. React를 왜 쓰는지 이해하기 위해서는 우선 public/index.html에 위의 샘플 코드가 있다고 가정하여 설명할 수 있습니다. 시맨틱 마크업에 대해서 알고 있다면 위의 소스 코드가 어떤 구조로 만들어져 있는지 쉽게 이해할 수 있습니다. 이제 위의 코드를 컴포넌트화하여 React를 왜 사용하는지를 알아보겠습니다. App.js import React, { Component } from 'react'; import './App.css'; class Header extends Component { render() { ..

프로젝트 구성 react-app 프로젝트 구성은 위의 그림과 같습니다. index.html id가 root인 태그 안에 UI 컴포넌트를 정의하게 된다. 꼭 id가 root여야하는건 아니며, 진입 파일에서 id는 변경 가능하다. App.js UI 컴포넌트에 해당하는 코드가 작성된 파일 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return( Edit src/App.js and save to reload. Learn React ); } } export default App; // 작성한 컴포넌트를 다른 곳에서 불러..

1. vscode를 설치 다양한 에디터 프로그램들이 있지만 터미널을 사용해 명령어로 제어하기 위해 vscode를 선택하였다. https://visualstudio.microsoft.com/ko/free-developer-offers/ 무료 개발자 소프트웨어 및 서비스 - Visual Studio 무료로 제공되는 제품: Visual Studio Community, Visual Studio Code, VSTS 및 Dev Essentials visualstudio.microsoft.com 위의 링크에서 Visual Studio Code를 다운로드 받아 설치한다. 2. 터미널 창 실행 처음 vscode를 설치하면 터미널 창이 보이지 않아 당황할 수 있는데, 단축키 ctrl+` 를 눌러 통합터미널 창을 열어준다...

node.js 설치 Webpack, Babel 등과 같은 사용 도구들이 자바스크립트 런타임인 node.js 를 기반으로 만들어졌다. 도구들을 사용하기 위해서 Node.js 를 설치해야 한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트로 이동하면 아래와 같이 다운로드 받을 수 있는 아래와 같은 화면이 보인다. LTS는 안정화된 버전이고 Current는 현재 최신의 버전이다. 개인의 취향에 따라 선택하여 파일을 다운로드한 후 설치하면 된다. 설치를 제대로 했는지 확인하기 위해서는 Window 기준으로 cmd 창을 실행하여, nmp -v..

정의 페이스북, 인스타그램에서 사용자 경험을 향상하기 위해 만든 자바스크립트 라이브러리입니다. = 사용자 인터페이스 라이브러리 (프레임워크가 아니다!) 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만들어졌습니다. 장점 1. 가독성 UI 컴포넌트를 만들어 가독성을 높일 수 있습니다. 2. 재사용성 UI 컴포넌트의 캡슐화를 통한 재사용이 가능합니다. 3. 유지보수 기존 코드를 모두 바꿀 필요 없이 수정이 필요한 UI 컴포넌트만을 수정하여 유지보수에 뛰어납니다. 즉, React는 UI 컴포넌트라는 개념에 집중되어 있는 라이브러리입니다. 리액트는 뷰만 관리하고, 나머지 기능은 3rd Party 라이브러리가 담당하게 함으로서, 다양한 시도를 할 수 있습니다. [3rd Party 라이브러리] Ro..