웹 애플리케이션을 만들 때 종종 반복되는 코드를 작성하는 경우가 생긴다. 아래 코드를 보자 // src/IterationSample.tsx function IterationSample() { return ( 눈사람 얼음 눈 바람 ); } export default IterationSample; 위 코드에서 특정 형태가 반복되는 모습을 확인할 수 있다. 현재는 간단한 코드이지만, 더욱 큰 프로젝트에서 더 복잡해진 코드를 봐야한다면, 반복적인 내용을 효율적으로 관리하는 방법이 있어야 한다. map() map함수를 사용해 반복되는 컴포넌트를 렌더링할 수 있다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 문법 arr.map..
일반적인 HTML의 DOM 요소 네이밍은 id를 사용한다 특정 DOM 요소에 어떤 작업을 해야할 때 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아 작업할 수 있다. 리액트에도 public/index.html 파일에 id가 root인 요소가 있다. 리액트에서는 ref 개념을 통해 프로젝트 내부에서 DOM에 이름을 달 수 있다. ref를 사용하는 경우 ref는 DOM을 반드시 직접적으로 건드려야 할 때 사용한다. 리액트에서는 DOM에 접근하지 않아도 state를 통해 구현할 수 있기 때문이다. 입력값을 검증하는 컴포넌트를 예시로 만들어보자. // src/ValidationSample.css .success { background-color:..
사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 이벤트라고 한다. HTML을 통해 주로 설정되지만 리액트에서도 작성할 수 있다. 리액트 이벤트 시스템 리액트의 이벤트 시스템은 HTML로 작성한 이벤트와 인터페이스가 동일하므로 사용법이 비슷하다. 따라서 HTML에서 작성하던 것처럼 작성하되 몇가지 주의해야할 사항이 있다. 이벤트 이름은 카멜 표기법으로 작성한다. HTML : [onclick. onkeyup] react : [onClick, onKeyUp] 이벤트에는 자바스크립트 코드 전달이 아닌 함수 형태의 값을 전달한다. 함수 형태의 값은 여러가지 형식이 허용된다. DOM 요소에만 이벤트를 적용할 수 있다. 즉, div, button, input, form, span 등의 DOM 요소에만 이..
애플리케이션 프로젝트를 만들 때, 여러가지 컴포넌트들을 사용해 하나의 화면으로 만들게 된다. 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 선언할 수 있다. 클래스형 컴포넌트 가장 처음 리액트 프로젝트를 생성했을 때 나오는 기본적인 App 컴포넌트는 함수형 컴포넌트이다. import React from "react"; import "./App.css"; import { Fragment } from "react"; function App() { const name: string = "Users"; r..
리액트 프로젝트 생성 리액트 프로젝트를 생성하기 위해서는 node.js의 npm이 필요하다. node.js를 설치했다면 터미널에 다음과 같이 입력한다. npm install -g yarn // 설치가 안된다면 sudo npm install -g yarn yarn create react-app hello cd hello yarn start // 타입스크립트도 프로젝트를 만들고싶다면 npx create-react-app hello --template typescript npm start 그 후, http://localhost:3000에 들어가보면, 자신의 리액트 프로젝트의 첫 화면이 나올 것이다. 그리고나서 /src/App.js 혹은 App.tsx를 보자. import React from 'react'; i..
리액트 웹에서 자바스크립트의 역할이 증대함에 따라, 자바스크립트 개발을 위한 수많은 프레임워크가 개발되었다. Angular, Backbone.js, Derby.js, Vue.js 등의 프레임워크들은 주로 모델과 뷰로 이루어져 있다. 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역 뷰 : 사용자에게 보이는 부분 이런 구조는 사용자에게서 어떤 작업등을 받으면 모델을 수정하고 변경된 사항을 뷰에 반영하도록 설계된다. 이로인한 단점은 애플리케이션 규모가 커지게 되면 상당히 복잡해지고 관리가 잘 되지 않을 시, 성능도 저하될 수 있다는 점이다. 이런 점을 리액트에서는 데이터가 변할때마다 처음부터 새로 렌더링하는 방식으로 애플리케이션 구조를 간단하게 설계할 수 있도록 만들어주었다. 리액트 이해 리액트는 자..
들어가며 이어서 타입스크립트 핸드북 훑어보기 [1. The Basics] 들어가며 이어서 타입스크립트 문서 훑어보기 들어가며 새로 시작한 프로젝트에서 프론트엔드는 타입스크립트로의 개발이 확정되었다. 타입스크립트를 한번도 사용해보지 않았던지라, 레퍼런 woongtech.tistory.com 이번 장에서는 자바스크립트 코드에서 찾아볼 수 있는 가장 흔한 타입들을 다루고, 이 타입들을 타입스크립트에서 어떻게 기술하는지 각각의 대응방식에 대해 설명한다. 타입은 단지 타입 표기 이외에도 훨씬 다양한 위치에 나타날 수 있다. 그러기 위해서는 우선 자바스크립트와 타입스크립트 코드를 작성할 때 가장 기본적이면서 흔하게 볼 수 있는 타입을 다시 보는데에서 시작해보는 것이 좋다. 원시타입 : string, number, ..
들어가며 이어서 타입스크립트 문서 훑어보기 들어가며 새로 시작한 프로젝트에서 프론트엔드는 타입스크립트로의 개발이 확정되었다. 타입스크립트를 한번도 사용해보지 않았던지라, 레퍼런스를 빠르게 훑고 넘어가는 시간을 가지기로 woongtech.tistory.com 타입스크립트 핸드북을 보면, 자바스크립트는 초기 설계에 비해 현재 매우 광범위한 목적으로 사용되고 있어, 자바스크립트 개발에 있어 규모에 맞는 관리가 어렵다고 말하고 있다. Handbook - The TypeScript Handbook Your first step to learn TypeScript www.typescriptlang.org 사용자들이 가장 흔히 발생시키는 오류가 타입 오류이기에, 그것이 단순한 오타이거나 API의 낮은 이해도이더라도, ..
