React로 서비스를 개발하다보면 사용자 입력을 받아 처리하는 서식, 즉 form 형태를 많이 만들어야 한다. 대표적인 form으로는 모든 서비스에 거의 다 있는 로그인 기능이다. 아래는 React에서 Typescript 기반으로 작성한 단순한 로그인 form 예시다. import React, { ReactElement } from 'react'; interface LoginForm { email: string; password: string; } export default function Login() { const [email, setEmail] = React.useState('') const [password, setPassword] = React.useState('') const handleSub..

React 설치 이 글에서는 무작정 리액트를 시작하는 법을 포스팅 하겠다. 윈도우라면 cmd창을, 맥이라면 터미널 앱을 연다 아래와 같이 설치를 진행한다. npm install -g create-react-app create-react-app my-app cd my-app npm start create-react-app 은 리엑트 프로젝를 만들기 위해 따로 설정해야할 기본 세팅을 자동으로 해주는 세트아이템 정도로 생각하면 된다. 프로그래밍을 배우기 위해 컴퓨터를 사는데 메인보드, 그래픽카드, 램 등을 따로 사서 조립해도 되지만 편리함을 위해 조립 PC를 살 수도 있다. create-react-app는 리액트를 하기위해 필요한 여러 라이브러리를 편리하게 세팅해주는 조립PC라고 생각하자. npm start를..

JavaScript와 TypeScript가 인기 언어로 급부상하면서 자바스크립트 라이브러리들이 다양하게 출시되었고 그 중 2021년 현재 왕좌를 차지하고 있는 녀석은 React 이다. 그래서 Web에서 React를 많이 쓰고 배워서 모바일 개발을 위해 React Native(이하 RN)을 배우고 싶어하는 개발자들이 많을 것으로 생각된다. React Native는 React와 문법이 매우 흡사하다. 또한 앱에 대한 전반적인 관리를 expo라는 뛰어난 관리 체계가 대신해줌으로써 React를 안다면 RN에 충분히 도전할 수 있다. 그래도 React와 RN은 다른 기기에서 구동되기 위해 다르게 만들어진 라이브러리이다. React만 알고 RN에 도전할 때 주의해야할 3가지 사항을 알아두고 도전한다면 더 배움이 수..

개요 별점을 주는 기능은 매우 흔하게 쓰이는 컴포넌트지만 구현하기는 꽤 까다로운 기능이다. 마우스를 별에 가져가면 별점이 자동으로 올라가게 만들거나, 클릭을 통해 별점을 지정하는 등 다양하게 만들 수 있다. React에는 react-star-rating-component react-star-rating-component React component for star (or any other icon based) ratings www.npmjs.com 위와 같은 라이브러리가 있다. 하지만 Typescript를 지원하지 않아서 React + Typescript 프로젝트를 진행하거나 간단한 구현을 원한다면 이 포스팅을 참고 하시길 바란다. Html 요소 별점을 나타내는 html 요소에는 많은 방법이 있다. 실제..