리액트
[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] 차근차근 Todo List 만들기 with Typescript- (3) ListItem Component
TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (3) 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A ※ typescript를 사용해서 만들기 때문에 VSCODE를 사용하신다면 tslint라는 확장프로그램을 사용하시면 typescript에 맞지 않는 문법들에 대해 경고 혹은 에러 밑줄을 확인 하실 수 있습니다. ListItem 컴포넌트는 앞서 언급했듯이 Todo List 기능에서 만들어진 각각의 할 일들에 대한 컴포넌트입니다. 우선 TodoListItem.tsx을 만들어주고 기본적인 틀을 만들어봅시다. import React from 'react'; export const TodoListItem = props =..
[React] 차근차근 Todo List 만들기 with Typescript- (2) 구조 설계
TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (2) ☞ 구조 설계 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A React를 이용해 웹 애플리케이션을 만들기 전 해야할 중요한 것은 웹 애플리케이션을 몇 개의, 무슨 기능을 하는 컴포넌트들로 구성을 할지 정하는 것이 중요합니다. 따라서 Todo List에 들어갈 컴포넌트들을 정해보겠습니다. 이 기능에는 List를 추가 할 부분, List를 보여줄 부분들로 구성해보겠습니다. AddForm Component : 할 일을 추가해 줄 컴포넌트 List Component : 할 일들을 보여 줄 컴포넌트 ListItem Component : 각각의 할 일들의 컴포넌트 ☞ ..