'FrontEnd/React' 카테고리의 글 목록 (3 Page)

FrontEnd/React 2022. 7. 7. 12:45

-ExpenseItem.js import './Expenseltem.css' import ExpenseDate from './ExpenseDate'; import Card from '../UI/Card'; function ExpenseItem(props) { const clickHandler = () => { console.log('Clicked!!!!'); } return ( {props.title} ${props.amount} Change Title ); } export default ExpenseItem; 태그에 onclick 이벤트를 넣고 원하는 상수를 실행! 만약! 함수로 만들어 함수로 실행하기를 원했으면 function clickHandler() { console.log('Clicked!!!!..

컴포넌트를 여러 컴포넌트로 분할하기

FrontEnd/React 2022. 7. 6. 22:19

컴포넌트에 또 컴포넌트를 분할해서 넣어보았다! index.js -> App.js -> ExpenseItem.js -> ExpenseDate.js 프로젝트의 React 구조는 이러하다. -index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './css/index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 먼저 index.js에 App.js를 부른다. -App.js import './css/App.css'; import ExpenseItem from '..

React 용어정리(축약)

FrontEnd/React 2022. 7. 6. 21:47

Components(컴포넌트) 사용자 인터페이스에서 재사용할 수 있는 빌딩 블럭 1.재사용 2.우려사항을 분리 - 작고 관리 가능한 단위로 유지 쉽게 말해서 React에 있는 컴포넌트는 단지 자바스크립트 함수일 뿐입니다. props(프로퍼티) 1. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름 갖는다) 2. 수정할 수 없다는 특징이 있다. ( 자식입장에선 읽기 전용인 데이터이다.) state props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리된다는 차이가 있다. JSX 자바스크립트 XML을 의미 합니다.

React 기본용어

FrontEnd/React 2022. 4. 5. 16:37

컴포넌트 (Component ) 리액트로 만들어진 앱을 이루는 최소환의 단위 데이터(Props)를 입력받아 View(State) 상태에 따라 DOM Node를 출력하는 함수 React에서 정의하는 컴포넌트 종류는 크게 함수형, 클래스형 컴포넌트 2가지가 있다. 함수형 컴포넌트 (Stateless Functional Component) 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성할 수 있다. 메모리 자원을 함수형 컴포넌트보다 적게 사용한다. State, lifeCycle 관련 기능 사용 불가능 (Hook을 통해 사용 가능) 클래스형 컴포넌트 (Class Component) 임의 메소드를 정의 할 수 있다. 메모리 자원을 함수형 컴포넌트보다 많이 사용한다. State, lifeCycle..

ABOUT ME

컴퓨터와 대화하는 블랑퐁

티스토리툴바