웹/(React)리액트26 (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. (React) 리액트 인라인 스타일/ React Inline style (React) 리액트 인라인 스타일/ React Inline style DOM요소에 스타일을 적용하는 것을 인라인 스타일이라고 한다. 또한 인라인 스타일에는 카멜 표기법(camelCase)을 사용해야 된다. *카멜 표기법이란 문자 안에서 '-' 기호를 없애고, '-'바로 뒷문자를 대문자로 바꿔주는 것이다. ex) font-size =>fontSize, background-color => backgroundColor src/App.js import React from "react"; const App = () => { const blog = "코드짜는 문과녀"; const style = { background: "pink", color: "gray", fontSize: "48px", fontWeight: .. 2021. 8. 17. 이전 1 2 3 4 5 다음
