본문 바로가기

리액트 기초2

[React] 재활용 가능한 기본적인 Input 컴포넌트 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 이때까지의 포스팅은 리액트의 가장 기초적인 내용이었다면, 지금부터는 그 내용을 토대로 좀 더 활용 가능한 것들을 다루도록 하겠습니다. 그래서 오늘은 가볍게 지난 시간에 다루었던 아이디, 비번 입력 Input 컴포넌트를 재활용 가능하도록 뼈대만 남기는 작업을 해보도록 하겠습니다. 그럼 Input.jsx 만들어보시죠! // ..\test_project\src\components\Input.jsx import React, { PureComponent } from "react"; import PropTypes from "prop-types"; class Input extends Pu.. 2020. 10. 6.
[React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 지금까지 총 13번의 포스팅으로 개발환경 구축부터 기본적인 Input 컴포넌트 개발까지 해보았습니다. 이번에는 앞으로 더 어려운 과정을 나아가기 위해, 기초 관련 글들을 정리하는 시간이 되겠습니다. ① 리액트 개발환경 구축 첫 번째 노드 버전 매니저(NVM)를 설치하고, 그것을 이용해 Node.js , NPM , yarn 등을 설정했습니다. ② Visual Studio Code 및 관련 플러그인 설치 개발환경 구축의 연장으로 VSCode 설치와 Reactjs code snippets , Prettier 플러그인을 설치했습니다. ③ 리액트 테스트 앱 생성 및 수정 yarn을 이용해 테스트 앱을 생성하고 기동 했으며, 아주 간단하게 Hello, world! 수준의 수정을 해보았습니다. ④ 리액트에서 사용하는.. 2020. 9. 29.