JavaScript/React.js8 React / RX https://m.blog.naver.com/jdub7138/220983291803 Reactive Programming과 Rx 비동기 데이터 흐름Reactive Programming을 한줄로 설명하자면 다음과 같습니다. (출처: https://gist.gi... blog.naver.com 2020. 7. 6. React / 클래스형 컴포넌트와 함수형 컴포넌트 리액트에서 컴포넌트를 선언하는 방식은 두가지다. 클래스형 컴포넌트 함수형 컴포넌트 - 클래스형 컴포넌트 예시 - 함수형 컴포넌트 예시 *클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까? 특징 클래스형 컴포넌트 - state 기능 및 라이프사이클 기능을 사용할 수 있다. - 임의 메서드를 정의할 수 있다. - render함수 가 꼭 있어야한다. - render함수 내에서 보여주어야 할 JSX를 반환해야한다. 함수형 컴포넌트 - 클래스형 컴포넌트 보다 선언하기가 훨 씬 편하다. - 클래스형 컴포넌트보다 메모리자원을 덜 사용한다. - 프로젝트 완성 후 빌드하여 배포할때 클래스형 컴포넌트보다 결과물의 파일크기가 작다. - state와 라이프사이클 API의 사용이 불가능하다. (리액트 16.8v. 업데이트 .. 2020. 6. 22. React / Recoil - 또 다른 React 상태 관리 라이브러리 https://ui.toast.com/weekly-pick/ko_20200616/ Recoil - 또 다른 React 상태 관리 라이브러리? 많은 React 상태 관리 라이브러리들이 있고, 가끔 새로운 라이브러리가 등장한다. 그러나 페이스북에서 직접 상태 관리 솔루션을 소개하는 것은 흔하지 않다. 이 라이브러리가 어떤 장점이 있고 � ui.toast.com 2020. 6. 16. React / JSX정의 및 장점 그리고 문법 *JSX란 JSX는 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니며, 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. JSX는 브라우저에서 실행되기전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 예시는 다음과 같다. //JSX function App() { return ( Hello react ); } function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } *JSX의 장점 보기 쉽고 익숙하다 일.. 2020. 6. 14. React / 번들러 *번들러? 리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다. 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다. 모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데 이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다. 번들러는 파일을 묶듯이 연결하는 것을 의미하며, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다. (참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.) 대표적인 번드러로는 웹팩, Parcel, .. 2020. 6. 13. React / Ubuntu 20.04 LTS에서 Node.js 및 npm설치하기 별거 없다. 1. 설치 명령어 sudo apt update sudo apt install nodejs npm 2. 버전확인 명령어 nodejs --version npm --version 2020. 6. 13. React / 초기 렌더링과 리렌더링 *초기 렌더링 어떠한 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render함수가 있다. render() {...} render함수는 다음과 같은 특징이 있다. 컴포넌트를 정의 뷰의 모양새와 작동 방식에 대한 정보를 지닌 객체 반환 내부 컴포넌트 재귀적 렌더링(컴포넌트 내부엔 컴포넌트가 들어갈 수 있다.) 이러한 특징을 가진 render함수를 가지고 초기 렌더링을 할때 과정은 다음과 같다. 내부컴포넌트 렌더링을 시작으로 최상위 컴포넌트와 내부 컴포넌트들을 렌더링함. 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만듬. 실제 페이지의 DOM요소 안에 주입. DOM.. 2020. 6. 13. React / 리액트란? *리액트(React.js) 리액트는 페이스북에서 2013년 3월에 발표된 자바스크립트 라이브러리이며 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 리액트는 사용자 인터페이스를 만들기 위해 사용되고 있으며 컴포넌트 기반으로 되어있어 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 또한 최대한 성능을 아끼고 편안한 사용자 경험을 제공하도록 구현되어 있으며 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만을 신경 쓴다. *리액트의 특징 컴포넌트 리액트는 컴포넌트 기반의 라이브러리이다. UI를 하나의 큰 덩어리로 생각하면 컴포넌트는 그 덩어리를 이루는 작은 요소들이다. 그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만들어지며 컴포넌트들.. 2020. 6. 11. 이전 1 다음
