전체 글250 (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. (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 ··· 14 15 16 17 18 19 20 ··· 50 다음
