import React ,{useState} from 'react'
const EventExample = () => {
// let contents = "내용입니다.";
const [contents, setContents] = useState("기본값") //변수를 무조건 배열로선언
const handleChange = (e) =>{ //onchange는 event라고 하는 인자를 전달해줌
const {value} = e.target
setContents (value)
Set 사용해야함
}
return (
<div>
<p>{contents}</p>
<input onChange = {handleChange}></input>
</div>
)
}
export default EventExample
App.js
-리액트를 표현하는 가장 중요한 키워드
-컴포넌트는 웹의 구성요소를 정의 내림
- 프롭스는 프로퍼티를 통해 데이터를 전달함
<img src ={logo} 처럼
const NameTitle = () =>{ //화살표함수의 첫번째 함수에는 프로퍼티 사용됨
return(<>
<p>안녕하세요 ~ 님 React Program 입니다.</p>
</>) //return 에는 하나의 묶음으로 표현
}
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
{Greeting}
<NameTitle></NameTitle>
컴포넌트의 재사용성을 생각한다(현업에서는)
html을 리턴하는 함수, 컴포넌트
함수형 컴포넌트는 앱의 생명주기를 컨트롤하기 쉬운 장점이 있다고함
일일이 안치고 빨리 만들수 있게하기
우와 개신기해
Header.js
//컴포넌트 따로 빼내는 연습
//rafce
import React from 'react'
export const Header = ({title}) => {
return (
<div>
<p>{title}</p>
</div>
)
}
export default Header
를 App.js 에 끼워넣는방법
import logo from './logo.svg';
import './App.css';
import Header from './component/Header';
const Greeting = <h1>hello, react</h1>
const NameTitle = ({ username }) =>{
//화살표함수의 첫번째 함수에는 프로퍼티 사용됨
return(<>
<p>안녕하세요 {username} 님 React Program 입니다.</p>
</>) //return 에는 하나의 묶음으로 표현
}
function App() {
return (
<div className="App">
<header className="App-header">
<Header title = "메인화면"></Header>
</header>
</div>
);
}
export default App;
여기서 쓰이는 <Header > 는 <header>와 같은게 아님
소문자 헤더는 html기본제공태그고
대문자 헤더는 직접 만든거
클라이언트측에서의 행동을 받는
onchange 는 프로퍼티중 하나임
밸류가 바뀔때
펑션과 연결해줘야함
target -> value을 통해 입력값 출력확인
입력 위치 알아냈으니, 콘솔로그 경로(e.target.value)통해 쉽게 입력값 보기
APP.js 에서는 만든 컴포넌트 불러오기만 하면됨 태그이요해서
이건 EventExample 컴포넌트 코드
import React from 'react'
const EventExample = () => {
const handleChange = (e) =>{ //onchange는 event라고 하는 인자를 전달해줌
console.log(e.target.value)
}
return (
<div>
<input onChange = {handleChange}></input>
</div>
)
}
export default EventExample
onClick 이벤트는이렇게
전달할때 괄호를 붙이면 객체전달이 아니라, 실행시키는 거임.
자세한건 React Event 핸들링 검색
내용을 바꾸기 위해서 사용해야한다.
리액트에서 정한것이기때문에 이렇게 안하면 바뀌지 않음.
Hook을 사용해볼거임 처음으로.
Hook은 우리가 만들 수 도있고, 기본설정된 여러 훅들이 있는데
useState 스테이트 사용은 기본
배열에 오브젝트가 들어있고 이를 컨트롤 어떻게 하는지
ListComponent.js
import React ,{useState} from 'react'
import Listitem from './Listitem'
const ListComponent = () => {
const [users, setUsers] = useState([
{name : "홍길동",
age :12,
height:180},
{name : "홍홍홍",
age :13,
height:170},
{name : "홍길길",
age :15,
height:150},
])
return (
<div>
{users.map((user)=>{
return(
<Listitem
username={user.name}
age={user.age}
height={user.height}>
</Listitem>
)})}
</div>
)
}
export default ListComponent
return 부분에 따로 만든 컴포넌트 삽입함
따로만든 컴포넌트(화면에 나타내주는)
Listitem.js
import React from 'react'
const Listitem = ({username, age, height}) => { //오브젝트 형태로 전달
return (
<p>
{username} 님 나이는 {age} 이고, 키는 {height}입니다.
</p>
)
}
export default Listitem
디자인 요소 라이브러리 다운
<react 서버 끌때는 ctrl+c>
terminal에 저거 설치
gradle 과 비슷하게 의존성 어ㅓ쩌고 설치하는거임
백틱으로 css요소들 입력
import React from "react";
import styled from "styled-components";
const HeaderBlock = styled.div`
display: flex;
height: 60px;
border-bottom: 1px solid #000000;
text-align: text;
color: red;
justify-content: center;
`;
const Header = ({ title }) => {
return (
<div>
<HeaderBlock>
<p>{title}</p>
</HeaderBlock>
</div>
);
};
export default Header
<Router>
<Switch>
<Route path="/test" exact></Route>
<Route path="/test" exact>
<Header title="테스트 페이지 1"></Header>
<EventExample></EventExample>
</Route>
<Route path="/test2" exact>
<Header title="테스트 페이지 2"></Header>
<ListComponent></ListComponent>
</Route>
</Switch>
</Router>
Ajax응용한건가봄
import React from "react";
import axios from "axios";
const AxiosTest = () => {
const handleGetData = () => {
console.log("버튼 이벤트");
axios.get("https://naver.com").then((response) => {
console.log(response);
});
};
return (
<div>
<button onClick={handleGetData}>데이터 가져오기</button>
</div>
);
};
export default AxiosTest;
여기서 then 이뭐지?
cors 에러 발생 (네이버에 axios하면)
도메인이 달라서 발생하는 문제임.
추가한뒤 토글클릭해서 활성화 시켜줘야
에러 발생안한다고 함.
이를 이용한 대표적 공격이 디도스 라고..
오 가져왔다
이제 강사님이 만드신 서버 2000번 포트로 접속해야하는데 막힘
프록시를 설정해야 한다고함. 그래서 일단 불가능 ~^^
Postman - 요청과 응답 쉽게 확인하는 프로그램
회원가입 -> 메인화면에 있는거 복붙
API기본은 API문서를 보고 만들어내는게 가장 기본적인 활용 방법
정당한 권한을 가질 수 있는 사용자들에게만 공유하기 위해
API KEY발급
API문서를 보면, language 라는 조건을 추가할 수 있다고 써있다고 함.
코드에다가 넣어서 가져와보기 (성공!)
'✍2021,2022 > FinTech' 카테고리의 다른 글
KISA 핀테크 아카데미 기초반 3일차 2차시 <수업일지> (0) | 2021.08.25 |
---|---|
KISA 핀테크 아카데미 기초반 3일차 1차시 <수업일지> (2) | 2021.08.25 |
KISA 핀테크 아카데미 기초반 2일차 1차시 <수업일지> (0) | 2021.08.24 |
KISA 핀테크 아카데미 기초반 1일차 2차시 <수업일지> (0) | 2021.08.23 |
KISA 핀테크 아카데미 기초반 1일차 1차시 <수업일지> (0) | 2021.08.23 |