KISA 핀테크 아카데미 기초반 2일차 2차시 <수업일지>

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

---

https://www.npmjs.com/

npm

디자인 요소 라이브러리 다운

 

<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하면)

도메인이 달라서 발생하는 문제임. 

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related

Allow CORS: Access-Control-Allow-Origin

추가한뒤 토글클릭해서 활성화 시켜줘야 

에러 발생안한다고 함.

이를 이용한 대표적 공격이 디도스 라고..

 

오 가져왔다

이제 강사님이 만드신 서버 2000번 포트로 접속해야하는데 막힘

프록시를 설정해야 한다고함. 그래서 일단 불가능 ~^^

---

Postman - 요청과 응답 쉽게 확인하는 프로그램

---

https://newsapi.org/

News API – Search News and Blog Articles on the Web

회원가입 -> 메인화면에 있는거 복붙

신기하구낭

API기본은 API문서를 보고 만들어내는게 가장 기본적인 활용 방법

정당한 권한을 가질 수 있는 사용자들에게만 공유하기 위해 

API KEY발급 

 

API문서를 보면, language 라는 조건을 추가할 수 있다고 써있다고 함.

 

코드에다가 넣어서 가져와보기 (성공!)

https://jsdev.kr/t/vue-js-axios-then/5717/5