React14 [ JavaScript ] ES6의 화살표 함수 화살표 함수(arrow function) 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식을 사용하지 않는건 아니다. 사용 용도에 따라 달라진다. 일반 함수를 이용한 선언 setTimeout(function() { console.log('Hello world'); }, 1000); 화살표 함수를 이용한 선언 setTimeOut(() => { console.log('Hello world') }), 1000); 일반 함수와 화살표 함수의 차이점 서로 가리키고 있는 this 값이 다르다. 일반 함수는 자신이 종속된 객체를 this로 가리킨다. 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 일반 함수의 예.. 2022. 10. 23. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (2) 앞에서 TypeScript+React를 사용한 정적인 리스트를 만들어 보았습니다. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. T codesign.tistory.com 이번에는 리스트에 데이터 모델을 추가해보았습니다. 파일 전체 아웃라인 > react-ts 파일 > node_modules > public > src > src > components > Todos.tsx > models > todo.ts (이 파일 만들 예정입.. 2022. 10. 22. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. Todos.tsx 파일 만들기 4. App.tsx 파일 만들기 5. 결과물 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. typescript 설치 명령어 npx create-react-app react-ts --template typescript 파일을 만들어준 뒤 밑의 명령어로 프로젝트를 실행시켜 주세요. npm start 파일 전체 아웃라인 > react-ts 파일 > node_modules .. 2022. 10. 21. [React] 리액트, 컴포넌트, DOM 이해 목차 리액트(React)란? 컴포넌트(component) Virtual DOM이란? DOM이란? DOM의 단점 DOM의 사용되는 예시 이를 개선하기 위해서는? 리액트는 실제 DOM에서 어떻게 작용할까? 1. 리액트(React)란? 리액트(React)는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다. 2. 컴포넌트(component) 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데 이와 달리 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트.. 2022. 7. 13. [React] React란? - 라우터 목차 React란? React-router-dom란? 리액트 라우터 (React Router) 경로 탐색자 (Route Matchers) 내비게이션 (Navigation) 왜 라우터를 쓰는가? 라우터 사용 방법 BrowserRouter 란 뭘까? Router 사용 예시 Redirect Switch 1. React란? React는 자바스크립트 라이브러리로써 SPA(Single Page Application)의 UI(User Interface)를 생성하는 라이브러리이다. 2. React-router-dom 리액트의 SPA (Single Page Application) 방식으로, 여러 개의 페이지를 새로운 페이지로 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 불러와 렌더링 하여 보여준다. react-r.. 2022. 2. 15. 이전 1 2 다음 728x90
