유령이 나오는 젤리하우스

웹/React

[React 기초] Todo list 만들기 :: 3)InputForm,TODOS

InputForm.js import React, {useState} from 'react' import {v4 as uuidv4} from 'uuid' function InputForm(props){ const [textInput, setInput] = useState('') //Submit 이벤트 발생시 실행 /현재 상태 저장 , localStorage에 상태 전달 function onSubmit(e){ e.preventDefault() if(textInput.length { if(Item.id === updatedItem.id){ Item = {...updatedItem} } return Item }) localStorage.setItem('TODOS',JSON.stringify(result)) } ..

웹/React

[React 기초] Todo list 만들기 :: 2) App, Container, Titlebar

개발 환경 설정 npm create-react-app TODO npm install sass --save npm install uuid create-react-app 을 사용해서 React를 준비해준다. 추가로 나는 css 대신에 scss를 사용할 것이기 때문에, sass도 준비해두자. Vue와 달리 React에서 sass를 사용할 때 sass-loader 같은 패키지를 준비하지 않아도 된다는 점이 좋았다. 추가로 uuid 라이브러리를 가져오자. uuid는 Universal Unique Identifier (범용 단일 식별자)의 약어로, 호출한다면 랜덤으로 생성된 문자열을 반환해준다. 컴포넌트에 key값이 필요할 때 고유한 값으로 설정하기에 딱 좋다. uuid를 안 쓴다면, id가 필요할 때 max_in..

웹/React

[React 기초] Todo list 만들기 :: 1) Intro

들어가는 말 Angular, React , Vue 대표적인 프론트엔드 프레임워크 3개만 꼽아보라고 하면 백이면 백 위 3가지를 말할 것이다. 나는 프론트엔드를 Vue로 시작했는데, Vue를 배우면서 이건 정말 간단하고 편한 만능 프레임워크라는 생각을 했다. 그런데 왜 아직까지 Vue보다는 React를 요구하는 기업이 많은걸까?? Vue가 React보다 늦게 나왔기에 이미 React를 쓰고 있는 기업들은 다른 프레임워크를 쉽사리 사용하기 어려운 점도 있겠지만, 분명 React 그 자체만의 장점도 분명 있을 것이다. 그 물음에 답하기 위해 내가 직접 React를 사용해보기로 했다. 공식문서에서 제공하는 튜토리얼과, 인터넷 강의 ( 큰 맘 먹고 유료로 결재함 ) 에서 주어지는 실습 과제들을 진행해봤는데, 하다..