js
[React] JSX 란?
리액트 앨리먼트는 React.createElent 와 팩토리를 사용하여 만들 수 있습니다. 하지만 리액트 팀은 리액트를 내놓으면서 더 편한 개발을 위해 JSX라는 포맷을 함께 내놓았는데..... 🧐 JSX 란? React.createElement를 번거롭게 입력하는 대신 사용할 수 있는 대안입니다. 자바스크립트의 확장으로 HTML과 비슷한 구문을 사용해 정의 할 수 있습니다. 태그를 사용해 엘리먼트의 타입을 지정하고, 태그의 애트리뷰트는 프로퍼티를 표현합니다. 여는 태그와 닫는 태그 사이에 엘리먼트의 자식을 넣을 수 있습니다. 👍 JSX Tip! 1. 내포된 컴포넌트 JSX에서는 다른 컴포넌트의 자식으로 컴포넌트를 추가할 수 있습니다. (예시) 2. className 자바스크립트에서는 class가 예약어..
[React] 리액트 컴포넌트 (클래스 컴포넌트와 함수형 컴포넌트)
🧐 리액트 컴포넌트 리액트에서 위와 같은 각 부분들을 컴포넌트라 합니다. 컴포넌트를 사용하면 서로 다른 데이터 집합에 같은 DOM 구조를 재사용할 수 있어야 합니다. 리액트로 만들고 싶은 UI를 생각할 때, 엘리먼트를 재사용 할 수 있는지 고려해야합니다. 이런 구조를 사용하면 확장성이 증가합니다. 리액트에서 컴포넌트를 만드는 3가지 방법 createClass를 사용하는 방법 ES6 Class를 사용하는 방법 상태가 없는 함수형 컴포넌트를 사용하는 방법 1) React.createClass (createClass를 사용하는 방법) 리액트가 처음 만들어졌을 때의 유일한 방법이었다. 재사용 가능한 리스트를 만들기 위해 아이템들이 들어 있는 배열을 컴포넌트에 프로퍼티를 통해 넘길 수 있다. (예시) const ..
[React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM)
🧐 가상 DOM이란? 실제 DOM에 접근하는 대신, 이를 자바스크립트 객체로 구성해 추상화하여 사용하는 방식입니다. 리액트가 모든 처리를 대신 해주기 때문에 위와 같은 DOM API 조작 작업을 직접 신경 쓸 필요가 없습니다. 대신 가상 DOM을 다루거나 리액트가 UI를 생성하고 브라우저와 상호작용하기 위해 사용하는 몇 가지 명령만 다루면 됩니다. 🧐 React Element (리액트 엘리먼트) 가상 DOM은 리액트 엘리먼트로 이루어져 있습니다. 또한 브라우저 DOM은 DOM 엘리먼트로 이루어져있습니다. 이 때, 리액트 앨리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야하는지 기술해줍니다. (리액트 엘리먼트 -> DOM 엘리먼트) 리액트 엘리먼트 ( React.createElement를 사용해..
[React] 리액트를 사용하는 이유?
🧐 리액트를 사용하는 이유? 👉 HTML의 기본 원리 : HTML은 간단히 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야하는 절차입니다. 이때 HTML 문서를 이루는 엘리먼트들은 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 됩니다.. 이 만들어진 DOM은 화면에 사용자 인터페이스를 표시해줍니다. 👉 AJAX의 탄생 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌습니다. 하지만 AJAX가 생면서 단일 페이지 앱(SPA) 가 생겨나 전체 웹 애플리케이션이 한 페이지로 실행 될 수 있게 만들어주었습니다. SPA에서 브라우저는 처음에 HTML 문서를 하나 적재하며, 자바스크립트가 사용자와 애플리케이션이 상호작용 하는 것에 맞춰 새 UI를 만들어주는 방법입니다. 이때 자바스크립..
[React] 함수형 프로그래밍 핵심 개념 - 데이터 변환
🧐 데이터 변환이란? 함수형 프로그래밍에서는 함수를 사용해 원본을 변경한 복사본을 만들어준다. -> 이런 식으로 변경하면 코드가 덜 명령형이 되고, 그에 따라 복잡도도 감소한다 이때 자바스크립트 안에는 데이터를 변환해서 다른 데이터를 만들어 낼 수 있게 해주는 도구들이 있다. 1) Array.filter 원본 배열로부터 새로운 배열을 만들어내는 자바스크립트 배열 내장 함수이다. 술어(predicate)를 유일한 인자로 받는다. (술어 : true나 false를 반환하는 함수) 배열에 있는 모든 원소에 이 술어를 한 번씩 호출한다. 술어에 배열의 원소를 인자로 전달하며, 반환 값이 true이면 해당 원소를 새로운 배열에 넣는다. const cities = cities.filter(city => city[0..
[React] 함수형 프로그래밍이란?
함수형 프로그래밍 🧐 함수형 프로그래밍이란? 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능하다. 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 고차함수 개념을 사용한다. 고차함수란? 아래와 같이 함수를 인자로 받거나 함수를 반환하는 함수 const createScream = logger => message => logger(message.toUpperCase() + "!!!") 자바스크립트에서도 함수가 1급 시민, 즉 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 취급 할 수 있기 때문에 함수형 프로그래밍을 지원한다. 함수를 변수, 객체, 배열에 넣을 수 있으며, 다른 값과 맟나가지로 함수를 다른 함수에 인자로 넘길 수 있고, 반환할 수 도 있다. ///함수를 변수..