10/07

Full Stack 교육 회고록

10/07

순두부 호랑이 2022. 10. 7. 16:03

728x90

SMALL

작업

1. Header에 있는로고 클릭 시, 메인 창으로 이동한다

2. 우리가 가진 json 파일 => 목록안에 세팅 완료!

1. JSX: HTML +JS

-- 규칙

a. 반드시 하나의 부모요소로 감싸줄 것

b. {} return 문 안에서 js문법쓰려면? => if문 사용 불가 => 삼항연산자?: =>&&연산자

c. 태그 사용할때 무조건 소문자

2.Component

- class Component => this문법

- function Component

컴포넌트: 어플의 최소단위

=> 반복되는 코드를 하나로 묶어서 컴포넌트로 만든다

3.props 프로퍼티: 상위 컴포넌트 => 하위 컴포넌트로 값을 전달

=> 하위 컴포넌트 : Const 하위컴포넌트 = (props) => {}

그런데, 속성 이름만 가져오고 싶다면? {속성이름}

4.useState

- 변수는 화면에 바로 렌더링 되지 않는다!

- 데이터 관리를 state로!

4.Map 함수 (배열함수) 즉, 앞에 있는 데이터가 배열이 아니면 사용 x

- 에러 "map 함수 내가 모르는 함수다 어쩌고저쩌고" =>

- key => 고유한 값

** 하위 컴포넌트 => 상위컴포넌트로 값을 전달 xx

(1) 상위 컴포넌트 함수 만들고

(2) 그 함수를 하위 컴포넌트에 전달

(3) 하위컴포넌트에서 함수 호출

(4) 값은 매개변수로 왔다갔다

5.useEffect(Lifycycle)

case1)화면 렌더링 완료! useEffect(()=>{},[])

case2) 특정 값이 변화했을 때 useEffect(()=>{}, [감지할값])

6.Router

(1) Browser Router

(2) Routes: 조건에 맞는 경로를 지정해주는 친구!

(3) Route: path, element

(4) Link

(5) useNavigate

7.Axios

비동기 통신

.get(url).then.catch

<App.js>

import './App.css';
import {useEffect, useState} from 'react'
import axios from 'axios'
import Newsitem from './components/Newsitem';

function App() {

  // Axios : 비동기 통신 라이브러리
  // (1) 설치 : npm i axios
  // (2) import axios from axios
  // (3) axios로 데이터 조회하기
  // axios                : 비동기적으로 데이터를 요청
  //       .get(url)      : get방식 /url에 있는 데이터
  //       .then(()=>{})  : 데이터 조회 성공 시 
  //       .catch(()=>{}) : 데이터 조회 실패 시
  //       .then(()=>{})  : 항상 실행하는 것

  // ** axios로 데이터 전송하기 (백엔드에)
  // axios      : 비동기적으로 데이터 전송
  //        .post(url, {보낼데이터}): 전송할 데이터, url 
  //        .then(()=>{})
  //        .catch(()=>{})

  let url='https://newsapi.org/v2/top-headlines?country=kr&apiKey=fa8d9d2a4b2a41b6805c902f4a3d8929'

  const [news, setNews]=useState([])

  const getNews = () => {
    axios.get(url)
      .then((res)=>{
        setNews(res.data.articles)
        console.log(news)
      })
      .catch(()=>{alert('error!')})
  }



  // 화면이 렌더링이 끝나면! 실행해주세요!
  useEffect(()=>{
    getNews()
  },[])
  

  return (
    <div>
        {news.map((item, idx)=>(<Newsitem key={idx+item.title} news={item}/>))}
    </div>
  );
}

export default App;

<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(
    <App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<Newsitem.js>

import React from 'react'

const Newsitem = ({news}) => {

    console.log(news)
  return (
    <div>
        <img src={news.urlToImage} width="200px"></img>
        <a href={news.url}>
            <h2>{news.title}</h2>
        </a>
        <p>{news.description}</p>
    </div>
  )
}

export default Newsitem

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <App />
  </BrowserRouter>
   
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<App.js>

import './App.css';
import {Routes, Route} from 'react-router-dom'

import Detail from './components/Detail';
import Header from './components/Header';
import Products from './components/Products';

function App() {
  return (
    <div>
      <Header/>
      <Routes>
        <Route path='/' element={<Products/>}/>
        <Route path='/detail:num' element={<Detail/>}/>
      </Routes>
    </div>
  );
}

export default App;

[components]

<Detail.js>

import React from 'react'
import { useParams, useSearchParams } from 'react-router-dom'

const Detail = () => {

  // useParams() => 파라미터
  // Route path 값을 수정
  let {num} = useParams()

  //useSearchParams() => 쿼리
  // url 값을 수정
  const [query, setQuery] = useSearchParams()

  // 장소까지 추가로 가져와서
  // h2 => 타이틀
  // p => 가격
  // p => 장소
  console.log(query.get('title'))
  console.log(query.get('price'))
  console.log(query.get('place'))

  return (
    <div>
      {num}번째 게시물
      <h2>{query.get('title')}</h2>
      <h2>{query.get('price')}</h2>
      <h2>{query.get('place')}</h2>
    </div>
  )
}

export default Detail

<Header.js>

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => {
  
  const linkStyle = {
    textDecoration : 'none',
    color: 'green'
  }
      return (
  <div>
        <Link to='./' style={linkStyle}>
          Campus K Market
        </Link>
    </div>
  )
}

export default Header

<Product.js>

import React from 'react'
import { Link } from 'react-router-dom'

const Product = ({item,idx}) => {

  console.log(item)
  const containerStyle={
    border: '1px solid gray',
    display : 'flex', 
    flexDirection : 'column'
  }

  return (
    <div style={containerStyle}>
      <img src={item.photo} width="100px"></img>
      <h2>
        <Link to ={'/detail'+idx+'?title='+item.title+'&price='+item.price+'&place='+item.place}>
          {item.title}
        </Link>
        </h2>
      <p>{item.price}</p>
      <p>{item.place}</p>
    </div>
  )
}

export default Product

<Products.js>

import React from 'react'

//데이터가 들어있는 json 파일
import sell from '../json/sell.json'
import Product from './Product'

//flex-wrap : wrap;
// => 크기가 넘어가는 데이터들은 다음 줄로 넘겨줌

const Products = () => {
  console.log(sell.list)
  return (
    <div>
      {sell.list.map((item,idx)=>(
          <Product key={idx+item.title} item={item} idx={idx}/>
      ))}
    </div>
  )
}

export default Products

728x90

LIST