반응형
App.js
import './App.css';
import ClassComponent from './components/R01_ClassComponent';
// ->R01_ClassComponent 에서 export 된 HTML 요소를
// ClassComponent 라고 부르겠다
// --> <ClassComponent/> 형태로 사용가능
import FunctionComponent from './components/R02_FuctionComponent';
// import 여기서 사용할 이름 form '경로';
import Props1 from './components/R03_Props1';
import Props2 from './components/R04_Props2';
// 기본적으로 //, /* */ 주석 사용가능(JS니까!!)
// 단, HTML 코드가 작성되는 영역에서는 {/* */} 주석 사용
function App() {
return (
<>
{/* JSX(JS에 HTML코드 포함) 주석 */}
{/* 클래스형 컴포넌트 */}
{/* <ClassComponent/> */}
{/* <FunctionComponent/> */}
{/* Props */}
<Props1 num='1' name='홍아영'/>
<Props1 num='2' name='기모링'/>
<Props1/>
<hr/>
<Props2 name='강감찬'
age ='72'
address='낙성대'
gender='남자'
/>
<Props2 name='영앤리치'
age ='100'
address='랑남'
gender='템플러 '
/>
</>
);
Props2
import React from 'react';
const PropsEx2 = (props) => {
// 구조 분해 할당(객체{})
let {name, age, address, gender} = props;
return(
<>
{/* react에서 class속성은 'className' 이라고 작성해야함! */}
<ul className='info'>
<li>이름 : {name}</li>
<li>주소 : {address}</li>
<li>성별 : {gender}</li>
<li>
나이 : {age}세,
{age < 20
? <span className='red'>미성년자입니다</span>
: <span className='green'>성인입니다</span>
}
</li>
</ul>
</>
);
}
export default PropsEx2;
state1
import React, { useState } from 'react'; // imrs
/*
State : 컴포넌트의 상태(컴포넌트 단위의 전역변수)
useState : 함수형 컴포넌트에서 State 사용을 위해 import하는 객체
*/
const StateEx1 = () =>{
/* 일반 변수 사용시
-> test 변수에 저장된 값은 A,B 변하고 있으나
화면은 리랜더링 되지 않음
(단순히 변수값이 변한 것이라고 인식하는 것일뿐)
*/
// let test = 'A';
/* 상태변수(State) 이용 */
const [test, setTest] = useState('A');
// useState('A')의 반환값
// === ['A', 0번 인덱스의 값을 바꿀 수 있는 함수(setter)]
// 클릭 시 수행되는 함수(이벤트 핸들러)
const ClickHandler = () => {
// A <-> B 왔다 갔다 동작
if(test === 'A') setTest('B');
else setTest ('A');
// setTest() 함수를 이용해서
// 상태 변수 test 값을 변경하면
// 해당 컴포넌트 리랜더링 수행!!
console.log("test : ", test);
}
return(
<>
<h1>{test}</h1>
<button
className='changeBtn'
onClick={ClickHandler}>Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!Change!!</button>
</>
);
}
export default StateEx1;
state2
import React, {userState, useState} from 'react';
/* 초기값 얻어와 1씩 증가/감소 */
const StateEx2 = (props) => {
// 상태(State)변수 선언
// -> 상태변수 count 값이 변할 때 마다
// 컴포넌트 re randering
const[count, setCount] = useState(props.init);
// + 버튼 클릭 시
const plusHandler = () => {
setCount( Number(count) + 1 ); // 1증가
}
// - 버튼 클릭 시
const minusHandler = () => {
setCount( Number(count) - 1 ); // 1감소
}
return(
<div className='count-container'>
<button className='minus-btn btn'
onClick={minusHandler}>-</button>
<h1>{count}</h1>
<button className='plus-btn btn'
onClick={plusHandler}>+</button>
</div>
);
}
export default StateEx2
state3
import React, { useState } from 'react';
/* 자식 컴포넌트 */
// props : 부모로 부터 전달 받은 값이 담겨있는 객체
const ChildId = (props) => {
// 부모로 부터 전달 받은 idHandler 함수
// -> 부모의 상태 변수 값을
// 자식 input에 입력된 값으로
// 변경하는 함수 실행
// === 자식이 부모의 상태 변수에 값을 대입
// === 자식이 부모에게 값을 전달
const handler = props.hanlder;
return(
<div className="wrapper">
{/* htmlFor == html에서 사용하는 for 속성 */}
<label htmlFor="inputId">ID : </label>
<input type="text" id="inputId" onChange={handler}/>
</div>
);
}
const ChildPw = (props) => {
const {handler} = props; // 구조 분해 할당
// const handler = props.hanlder;
return(
<div className="wrapper">
<label htmlFor="inputPw">PW : </label>
<input type="password" id="inputPw" onChange={handler}/>
</div>
);
}
/* 부모 컴포넌트 */
const ParentComponent = () => {
// 상태 변수 선언(값이 변하면 리랜더링되는 변수)
const [id, setId] = useState(''); // 초기값 빈칸
const [pw, setPw] = useState('');
// 이벤트 핸들러
const idHandler = e => {
// e : 이벤트 객체
setId(e.target.value);
// input에 작성된 값이 변하면
// 상태 변수 id 값을 바꿔서 리랜더링 수행
}
const pwHandler = e => {
setPw(e.target.value);
}
// 상태 끌어올리기로
// 자식한테서 얻어온 값이 user01, pass01이 맞는지 확인
const loginCheck = () => {
if(id === 'user01' && pw === 'pass01'){
alert('로그인 성공');
} else{
alert('아이디 또는 비밀번호가 일치하지 않습니다');
}
}
return(
<>
<ChildId hanlder={idHandler}/>
<ChildPw handler={pwHandler}/>
<div className="wrapper">
{/* id, pw중 하나라도 입력 안되면 버튼 비활성화 */}
<button
disabled={id.length === 0 || pw.length === 0}
onClick={loginCheck}>
Login
</button>
</div>
</>
);
}
export default ParentComponent;
반응형