All Story
[ React ] 리액트 Axios
이번 게시글에선 Axios 를 이용해 api 와 연동하는 간단한 예제를 살펴본다. Axios 는 HTTP 클라이언트 라이브러리로 React, Vue 에서 많이 사용된다. 이는 Promise 기반으로 XHRHttpRequest 요청을 쉽게 할 수 있게 해주는 강점이 있다. Promise 가 뭔지 궁금하면 여기를 참조하길 바란다. 아래와 같이 CMD 에 입력한다. // react-axios 프로젝트 생성 C:\> create-react-app react-axios // react-axios 프로젝트로 이동 C:\> cd react-axios // yarn 으로 axios 설치 C:\react-axios> yarn add axios // 실행 C:\react-axios> yarn start reac..
[ React ] 리액트 Hooks(useState, useEffect)
Hooks 는 함수형 컴포넌트에서도 state 를 관리할 수 있도록 해주는 useState 와 렌더링 직후 작업을 수행하는 useEffect 등을 제공한다. useContext, useReducer, useCallBack 등 여러 기능이 더 있지만, 현 게시글에선 useState 와 useEffect 기능만을 다룬다. 이는 리액트 version 16 부터 제공되는 기능이다. react-hook 이라는 프로젝트를 생성하고 실행해보자. C:\> create-react-app react-hook C:\> cd react-hook C:\react-hook> yarn start useState 먼저 useState 는 가장 기본적인 Hook 의 기능으로 함수형 컴포넌트 내에서 능동적으로 상태를 ..
[ React ] 리액트 라우터 React-Router
이번 게시글에선 간단하게 리액트-라우터(React-Router)가 뭔지 알아보고 사용할 예정이다. 리액트-라우터(React-Router)란? 리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다. 이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다. 먼저 react-router 라는 프로젝트를 만들고 해당 프로젝트 경로로 이동하자. C:\> create-react-app react-router C:\> cd react-router React-Router 를..
[ React ] 리액트 JSX TIP
본래 리액트에서 리액트 엘리먼트를 생성할 때 React 가 가지고 있는 createElement 메서드를 통해 생성해낸다. color 라는 id 를 가졌으며 text 는 "빨강" 을 집어넣은 엘리먼트 h1 태그를 만들 때 아래와 같이 만들어낸다. React.createElement("h1", {id: "color", 'data-type': "title"}, "빨강"); // 빨강 createElement 로 엘리먼트를 만들 경우 빨강 처럼 data-reactroot 가 붙게 되는데 이는 리액트 컴포넌트의 루트 엘리먼트를 식별해주는 애트리뷰트이다. 여튼 이처럼 리액트에서 엘리먼트를 생성할 때 createElement 를 사용하곤 했는데 매번 엘리먼트를 생성할 때마다 React.createEl..
[ React ] 리액트 함수형 프로그래밍
함수형 프로그래밍이란 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능한 프로그래밍을 뜻한다. 이는 함수가 다른 함수를 조작하고, 함수가 함수를 인자로 받거나 반환하는 것이 가능한 고차 함수 개념을 사용한다. 정수나 문자열 같은 일반적인 값을 1급 시민이라 하는데 JAVASCRIPT 는 함수를 1급 시민과 같이 취급하기 때문에 함수형 프로그래밍을 지원한다. 무슨말인가 하니 함수를 변수, 객체, 배열에 넣을 수 있고 이 함수를 다른 함수에 인자로 넘길 수 있고 반환 또한 가능하다. 함수형 프로그래밍의 다양한 예제를 보며 이해해보자. 보통 JAVASCRIPT 에서는 아래처럼 함수를 변수에 담아 사용할 수 있다. var logMessage = function(mes..