본문 바로가기

Front-end

 (97)
JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰) 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다. 다음의 예제를 보자. HTML이 .js의 변수에 저장되어 있다. 변수에..
Rendering이란? html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다. 엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서) React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다. 위의 그림을 보면 전체 H..
React 강의 by 동빈나 https://youtu.be/s2knmog2j1U?list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB
React Hooks란? React Hooks React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것 React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다. class component import React, { Component } from 'react'; class App extends Component { s..
React.JS 강의 by 코딩앙마 https://youtu.be/05uFo_-SGXU?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-
Styled Components : 리액트 스타일 컴포넌트 Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하며 전역에서 중첩 사용되지 않게 (컴포넌트 자체에서만 적용됨) 만들어준다. Scss & styled components 비교 CSS만 쓰다 SASS를 처음 썼을때 너무나 편하게 사용한 것도 잠시! 클래스이름이 겹치면 전역에서 같은 클래스 이름에 동시에 적용되는 문제로 여기저기 스타일이 무너지는 문제를 격곤 한다. 그래서 최상위 태그의 클래스명을 시작-하고-또-하이픈을-이어-이름을-짖는 것과 같이 길죽한 문장을 쓰기도 했는데...
SPA(Single Page Application)란? SPA란? SPA란 쉽게 말해 1개의 페이지만 있는 애플리케이션이다. 하나의 페이지에서 내용만 바뀌는 것이다. 서버로부터 새 페이지(html)를 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 그런 웹앱을 작성하는 패러다임, 디자인 패턴이다. 최초로 한 번 페이지 전체를 로드한 후에는 데이터만 변경해서 쓸 수 있다. 서버로부터 정적 파일을 한 번이나 여러 번에 걸쳐 다운로드 받고 사용자와 상호작용 중 필요한 데이터만 서버에서 동적으로 받는다. SPA 결과물은 하나의 웹 문서가 아니라 응용 프로그램 같은 것이다. 보통 Amazon S3 버킷의 정적 호스팅을 통해 소스나 파일을 전송한다. 여기서 html 파일 전송은 하지 않고 XML이나 JSON만 서버에서 요청되거나 서버로 전송되는데, 이 정..
03.Typescript : interfaces

티스토리툴바