본문 바로가기

React

[React 기본] 컴포넌트간 props와 이벤트 전달해보기
위와같은 걸 만드는데 컴포넌트를 쪼개어 만들어보았다. vue와 비슷한데 조금은 더 간단(?)하게 전달할 수 있었다. 부모 -> 자식으로 props로 데이터를 전달하고, 자식은 props를 변경하고 싶으면 vue의 emit처럼 부모로 이벤트를 전달하여 값을 변경하였다. 1. props 전달해보기 (부모 > 자식) 부모 컴포넌트 import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { name: 'Reading', count: 0, }, { name: 'Running', count: 0, }, { name: 'Coading', count: 0..
[React 기본] class형 컴포넌트로 state와 onClick 사용해보기
1. 기본 생김새 만들어보기 class Habit extends Component { render() { return ( Reading {/* 숫자 */} 0 {/* 더하기버튼 */} {/* 빼기 버튼*/} ) } } 2. 숫자를 하드코딩 0 에서 변수로 변경해보기 ( {this.state.count} ) class Habit extends Component { state = { count: 0, }; render() { return ( Reading {/* 숫자 */} {this.state.count} {/* 더하기버튼 */} {/* 빼기 버튼*/} ) } } render 함수 위에 state를 만들고 그 안에 변수를 만든다. 만든 변수를 0 대신에 중괄호를 이용하여 변수로 바꿔준다. {this.sta..
[React 기본] React 시작 전 기본개념 정리 (class와 함수형, jsx, public과 src폴더)
class 와 함수형 컴포넌트의 차이 기존(16.8.0 이전) class function 관련된 데이터와 함수가 하나로 묶여져 있는 형태 javascript에서 쓰던 흔한 함수 state라는 데이터 묶음과 라이프사이클 훅이 들어있음 { {item} }) } 폴더 구조 public 정적인 요소들 src 동적인 요소들 (실제 작업 폴더라고 생각하면 된다.)
[React 기본] React 세팅하기 (fontawesome 설치하기)
1. 설치목록 node.js 크롬 확장도구 react dev 2. vscode 에디터 확장 툴 설치목록 reactjs snippet (rcc enter 하면 자동으로 기본 형태 만들어줌) auto import (컴포넌트 자동으로 import 해주는 툴) 3. 북마크하기 리액트공식문서: https://ko.reactjs.org/docs/getting-started.html 4 작업할 폴더에서 터미널 열어서 아래 명령어 실행 (my-app 대신에 본인이 하고싶은 이름) npx create-react-app my-app 5. 설치가 되면 해당 폴더로 이동하여 (cd my-app) 서버를 실행한다. (npm run start) cd my-app npm run start ** 만약 create-react-app ..

티스토리툴바