Basics
Index
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(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();- src>index.js
- 해당 파일에서
#root에render()메서드를 통해 출력 내용을 html 요소로 주입<body> <div id="root"></div> </body>- public>index.html
- 모든 출력은 해당 파일의 html 요소를 통해서만 발생
- 각 파일은
function을 통해 내용을export하여,export한 이름으로<React.StrictMode>태그에render()
Variable Usage
function OneApp(props) {
//스타일을 변수에 지정
const styleImg1={
width:'200px',
border:'5px solid green',
marginTop:'20px'
}
return (
<div>
<h2 className='line2'>FirstApp Component!</h2>
<div style={{fontSize:'25px',marginLeft:'100px',backgroundColor:'lightgray'}}>
안녕~ 오늘은 목요일이야!
</div>
{/* src의 이미지는 import */}
<img src={img1} style={styleImg1}/>
<img src={img2} style={{width:'200px',border:'3px dotted pink',marginLeft:'50px'}}/>
{/* public image는 직접 호출가능 */}
<h3>public image</h3>
<img src='../image2/08.png'/>
</div>
);
}
export default OneApp;function의return값을export하여 이를 index.html의 요소로 주입return값은 오로지 하나의 태그만으로 구성 (다양한 태그를 사용하려면 하나의<div>태그 내에 사용)- 변수를 표현식 :
{ } - 태그의 속성 값이 여러 개일 경우 모두 표현식(
{ })을 통해서만 입력해야 하며, 이를 변수로 대체 가능- 따라서 속성 값 입력 시
{{ }}발생 - 단일 속성 값 입력 시 문자열(
’ ‘) 형식으로 입력 가능
- 따라서 속성 값 입력 시
Expression Ex
function TwoApp(prop) {
let hello=<h2 className='alert alert-info'>Hello</h2>;
return (
<div>
{hello} {/*위의 태그를 html요소로 인식*/}
{hello}
</div>
)
}- React에서는 변수에 값이 아닌 태그도 저장 가능
Import
import React from 'react';
import './MyStyle.css';
import img1 from '../image/s5.JPG';
import img2 from '../image/s6.JPG';- CSS 등의 설정은 경로를 찾아 그냥
import - 태그, 값 등의 변수는
import ~ from ~을 통해import만으로 변수명 지정 가능
Hooks
Status Variables & Event Function
[ ] & Lambda Expression
- Hooks는 대체로
use~의 메서드명을 사용
function ThreeApp(props) {
//상태관리를 위한 변수설정
const [message,setMessage]=useState('Happy Day');
//이벤트 함수
const enterEvent=(e)=>{
if(e.key==='Enter'){ //e.keyCode===13
setMessage('');
e.target.value='';
}
}
return (
<div>
<input type='text' defaultValue={message}
onChange=(e)=>{
console.log(e.target.value);
setMessage(e.target.value);
}
onKeyUp={enterEvent}/>
</div>
)
}[ ]를 통해 변수의 상태를 관리 가능-
[name, setName]:name은 변수명을 의미,setName은 변수 값을 설정하는 메서드명 의미 -
useState(def):def는 초기 값을 의미 (set메서드 사용하지 않은 상태의 값)import React, { useState } from 'react'; -
Hooks의 모든 메서드는
react파일에서import
-
- 이벤트 함수의 경우 인자 값으로 이벤트 핸들러 변수 설정하여 사용
key: 키 입력 시 해당 키의 값 반환target.value: 이벤트 대상 특정 태그의 value (변수 값 초기화해도target.value초기화하지 않을 시 실제 변수에 저장된 값은 초기화되지 않음)setMessage('');와e.target.value='';: 앞은 변수 값 설정, 저장된 value 설정
Ex
import React, { useState } from 'react';
function FiveApp(props) {
const [name,setName]=useState('');
const [java,setJava]=useState(0);
const [react,setReact]=useState(0);
const [total,setTotal]=useState(0);
const [avg,setAvg]=useState(0);
return (
<div>
<h2>FifthApp</h2>
<div>
이름: <input type='text' onChange={(e)=>{setName(e.target.value);}}/>
<span>{name}</span><br/>
자바점수: <input type='text' onChange={(e)=>{setJava(e.target.value);}}/>
<span>{java}</span><br/>
리액트점수: <input type='text' onChange={(e)=>{setReact(e.target.value);}}/>
<span>{react}</span><br/>
<button type='button' onClick={(e)=>{
setTotal(Number(java)+Number(react));
setAvg(Number(total)/2);
}}>결과보기</button>
</div>
<div>
총점: <span>{total}</span><br/>
평균: <span>{avg}</span>
</div>
</div>
);
}
export default FiveApp;Number()은 문자열을 숫자로 변경하는 메서드 (오로지 숫자인 문자열만 변환)parseInt()는 숫자와 문자가 합쳐진 문자열 중 숫자 값만 숫자로 변환
초보개발자