본문 바로가기

Dev/React

 (7)
리액트 react create 예제 function Article(props) { return {props.title} {props.body} } function Header(props) { return { event.preventDefault(); // 기본 동작 방지 props.onChangeMod(); }}>{props.title} } function Nav(props) { const lis = []; for(let i = 0; i {t.title} ); } return {lis} } function Create(props) { return Create { event.preventDefault(); const title = event.target.title.value; const body = event.target.body.va..
리액트 react state prop 과 state의 공통점은 각각의 값이 변경되면 새로운 return 값을 만들어 ui를 바꿈 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한것 state는 컴포넌트를 만드는 내부자를 위한것 function App() { const mode = 'WELCOME'; const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] let content = null; if(mode === 'WELCOME') { content = }else if (mode === 'READ') { conten..
리액트 react 이벤트(event) function Header(props) { return {props.title} } 결과 축약형 어로우 펑션 { alert('Header'); }}> function Header(props) { return { event.preventDefault(); // 기본 동작 방지 props.onChangeMod(); }}>{props.title} } 태그가 복수일때 const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] { alert(id); }}> function Nav(props) { c..
리액트 react 속성(props) 속성은 props를 사용 function Header(props) { console.log('props', props, props.title); return {props.title} } function Article(props) { return {props.title} {props.body} } prop을 이용한 출력 방법 function App() { return ( ); } 결과 li 같이 복수의 경우 function App() { const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ..
리액트 react 컴포넌트 만들기 컴포넌트(사용자 정의 태그)는 첫 시작은 대문자 컴포넌트 정의 function Header() { return WEB } function Nav() { return html css js } function Article() { return Welcome Hello, WEB } 컴포넌트 사용법 function App() { return ( ); }
리액트 react 소스 수정 방법, 배포 1. 소스 수정 방법 create-react-app 기본 구조 src > index.js 기본 입구 파일 index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to lo..
리액트 react 개발환경 기본 세팅 1. node.js 환경이 필요 -> node.js 설치 LTS -> 안정화 버전 | Current -> 현재버전 1-1. WINDOW 환경 설치 확인 win+r -> cmd -> node -v, npm -v (버전이 나올시 node.js와 npm이 정상적으로 설치된것) 1-2. MAC 환경 세팅 설치 확인 spotlight search -> terminal -> node -v, npm -v (버전이 나올시 node.js와 npm이 정상적으로 설치된것) 2. create react app 설치 2-1. npm을 이용한 설치 cmd, terminal 실행 npm install -g create-react-app 권한이 없어서 실패할 경우 에러 -> eacces sudo npm install -g creat..

티스토리툴바