웹49 (React) 리액트: 초간단 리스트 작성 기능 구현하기(간단함)/이벤트 핸들링 및 useRef, useState 사용 (React) 리액트: 리스트 작성 프로젝트 만들기(간단함) *이 포스팅은 개인적으로 리액트를 복습하기 위해 작성한 포스팅입니다. 포스팅 요약 1. 기능설명 및 실행 화면 2. 이벤트 핸들링에 대한 간단 설명 3. useRef에 대한 간단 설명 4. useState에 대한 간단 설명 5. 간단한 리스트 작성 기능 구현하기 (css X) 1. 기능설명 및 실행 화면 기능: 1. 입력: input태그에 문자 입력 후, 확인버튼 클릭 or 엔터 시, 입력된 문자 출력 2. 삭제: 삭제를 원하는 요소 더블클릭시 삭제 3. 수정: input태그에 문자 입력 후, 대체하고 싶은 요소 클릭시, 수정됨. 2. 이벤트 핸들링에 대한 간단 설명 리액트에는 HTML과 같은 이벤트들이 있습니다. ex) onClick, onm.. 2021. 8. 22. (React) 리액트 useState 사용해서 계산기 프로그램 만들기 (React) 리액트 useState 사용해서 계산기 프로그램 만들기 * 아직 코드에 주석 설명을 달지 않았습니다. 계산기 하나 만드는데 이렇게 어려운가.....?! 엄청 간단한줄 알았는데... 몇시간이나 걸렸다 ㅇㄴ.... 계산기를 눌렀을때, 복잡한 사칙 연산 까지 가능한 계산기를 구현 하기 위해 머리를 잔뜩 굴렸다. 분명 더 간단하게 하는 방식이 있겠지만, 리액트 초보자인 나로서는 아래 풀이 방법이 최선이다... ㅠ_ㅠ 혹시 계산기를 만드는 더 좋은 방법이 있다면 꼭 코드 공유해주세요.... ㅠㅠㅠㅠ... 1. 복잡한 사칙연산 가능 2. 일의 자릿수 이상 자릿수의 계산 가능 3. 기호는 먼저 클릭한 것부터 계산. (ex. 13+17*2 => 13+17=30, 30*2=60) 어려웠던 점 예를들면 (1.. 2021. 8. 20. (React) 리액트 state를 사용한 더하기 프로그램 만들기(초간단) State 직접 사용해보기 아무리 이론을 봐도 직접 사용해보지 않으면, 잘 와닿지 않아서 state를 사용하여 초간단 더하기 프로그램을 만들어 보았습니다. - 초기화 버튼 눌렀을시 & 초기화면 - 더하기 및 result 버튼 클릭시 Counter.js import React, { Component } from 'react'; import './Counter.css'; class Counter extends Component { state = { number1: '', number2: '', number: 0, }; result = (e) => { //클릭시 결과값이 나옴. //number1과 number2둘다 문자이므로 //parseInt를 사용하여 number로 형변환을 해줌. this.setState.. 2021. 8. 18. (React) 리액트 props, 컴포넌트에게 값 전달하기 (React) 리액트 props, 컴포넌트에게 값 전달하기 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 1. App에서 Props값 지정 *App컴포넌트에서 값을 지정하는 경우입니다. App.js import React from "react"; import Component from "./Component"; const App = () => { return ; }; export default App; Component.js import React from "react"; const Component = (props) => { return 안녕하세요, 제 이름은 {props.na.. 2021. 8. 18. (React)리액트 : 함수형 컴포넌트 VS 클래스형 컴포넌트 (React)리액트 : 함수형 컴포넌트와 클래스형 컴포넌트에 대해서 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 함수형 컴포넌스 VS 클래스형 컴포넌스 함수형 컴포넌트 클래스형 컴포넌트 state X O 라이프사이클 X O Hook O X 장점 1. 클래스형 컴포넌트보다 선언하기 편함 2. 메모리 자원이 클래스형 컴포넌트보다 덜 사용함. 3. 파일크기가 클래스형보다 더 작음 ... 간편한 코드 생성 단축키 에디터에서 rsc 입력 후, Tab누르기 에디터에서 rcc 입력 후, Tab누르기 코드 형식 import React from 'react'; const TodosContain.. 2021. 8. 18. (VsCode)Visual Studio Code 저장할 때 자동 코드정렬/자동 코드정렬 prettierrc 사용하기 Visual Studio Code 자동 코드 정렬 포스팅 요약 1. 저장 시 자동 코드 정렬 설정법 2. prettierrc 사용하여 원하는 형식으로 코드 정렬 Vscode 열은 후 > code > Preferences > Settings 검색창에 format on save 입력 > Format On Save의 체크박스 체크 이렇게 설정하면 저장할때마다 코드가 자동으로 정렬됩니다. Prettier 다운로드 프로젝트 폴더에 .prettierrc폴더 생성 .prettierrc 사용전 코드 .prettierrc 적용 * 아래 옵션말고도 많은 옵션들이 있습니다. 아래 링크를 참고해 주세요. https://velog.io/@kyusung/eslint-prettier-config { "singleQuote": tr.. 2021. 8. 17. 이전 1 ··· 3 4 5 6 7 8 9 다음
